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

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

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

1 个答案: