背景大小：移动设备上的 100%答案

【问题标题】：background-size:100% on mobile devices背景大小：移动设备上的 100%
【发布时间】：2014-09-10 09:24:09
【问题描述】：

我正在尝试使用设置为background-image 的图像进行固定 div。我将background-size 设置为100%，因此对于大屏幕分辨率或缩小时它不会重复或太小。现在的问题是，在移动设备上，背景图像变得太小并移出可见区域。

我该如何解决这个问题？有没有比background-size:100%更好的解决方案？

CSS：

.background {
position:fixed;
margin-top:65px;
height:400px;
background: url(../img/1111.jpg) no-repeat;
width:100%;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
top:0px;
}

【问题讨论】：

我可以让背景在某个点停止缩放并改为裁剪吗？

标签： html css mobile fixed background-size

【解决方案1】：

要回答您的评论，是的，您可以在 CSS 中设置 min-width、max-width 或 min-height、max-height。

.background {
position:fixed;
margin-top:65px;
height:400px;
background: url(../img/1111.jpg) no-repeat;
width:100%;
min-width: 400px; /* change this to your choice */
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
top:0px;
}

【讨论】：