html - 背景大小：移动设备上的 100%

Question

我正在尝试将图像设置为background-image. 我将其设置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;
}

Answer 1

要回答您的评论，是的，您可以在 CSS 中设置最小宽度、最大宽度或最小高度、最大高度。

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