<分区>
我创建了 2 个网站 - 如何让标题背景图片在移动设备上正确调整大小？在移动设备上查看时，图像两边都被截断了。
我在每个标题部分都有这段代码:
这是每个的代码:
segregatedsunday.com
#h {
background: url(../img/header.jpg) no-repeat center top;
padding-top: 180px;
text-align:center;
background-attachment: relative;
background-position: center center;
min-height: 700px;
width: 100%;
color: white;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
whitehatdev.co
#headerwrap {
background: url(../img/header_bg.jpg) no-repeat center top;
margin-top: -50px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;
min-height: 650px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
最佳答案
我正在查看您的第一个示例，它通常看起来不错。额外的 100% 背景大小的东西不适合这种情况。当我将 jsfiddle 拖动得越来越大和越来越小时，图像会像“封面”一样动态调整大小。哞!
#headerwrap {
background: url(http://www.glitters20.com/wp-content/uploads/2012/11/Funny-Cow-37.gif) no-repeat center top;
margin-top: -50px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;
min-height: 250px;
width: 100%;
/* -webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%; */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
你不会混淆掩护和收容吧？目前尚不清楚您要实现的目标。 Cover 和 Contain 将保持纵横比，因此图像不会失真。
contain
The contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container.
cover
The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.
关于css - 2 Bootstrap 网站不是背景图片没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30960233/