Question

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

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

background-size：移动设备上的100％

1 个答案: