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

Question

Html

<div id="header">
 <h1>Mark Osullivan</h1>
 <h2>Wedding Photography</h2>
</div>

Css

#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;
}

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

任何帮助都将是伟大的，感谢

Answer 1

你必须保持纵横比吗？

如果是，则将背景设置为

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

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