Html 如何在响应性网页中垂直缩放背景图像

Html

当前，当我更改屏幕大小时，我的背景图像会水平缩放，但我希望在不设置媒体查询的情况下也能垂直缩放

---

任何帮助都会很好，谢谢

您需要保持纵横比吗

如果是，则将背景设置为

#header {
 width: 100%;
 height: 100%;
 max-width: 1024px;
 max-height: 191px;
 background-image: url(../images/Header.jpeg);
 background-size: 100% 100%;
 background-repeat: no-repeat;  
}  

#header h1 {
 color: #FFFFFF;
 text-shadow: 3px 3px #000000;
 font-size: 50px;
}

#header h2 {
 color: #FFFFFF;
 text-shadow: 3px 3px #000000;
 font-size: 35px;
}

#header h1, #header h2{
 text-align:center;
}

---

这将保持纵横比，它将垂直和水平缩放图像，尽管如果视口尺寸与背景图像尺寸不匹配，它将裁剪图像

谢谢您的回复，但是当我移动到较小屏幕尺寸时，图像的部分将消失，在中，我仍然希望能够以较小的比率查看整个图像。只有当背景和屏幕的纵横比相等时，背景的所有部分才可见，否则，背景将被裁剪

#header {
 width: 100%;
 height: 100%;
 max-width: 1024px;
 max-height: 191px;
 background-image: url(../images/Header.jpeg);
 background-size: 100% 100%;
 background-repeat: no-repeat;  
}  

#header h1 {
 color: #FFFFFF;
 text-shadow: 3px 3px #000000;
 font-size: 50px;
}

#header h2 {
 color: #FFFFFF;
 text-shadow: 3px 3px #000000;
 font-size: 35px;
}

#header h1, #header h2{
 text-align:center;
}

#header {
  background: url(../images/Header.jpeg) center center;
  background-size: cover;
  background-repeat: no-repeat;
}