Question

我的图片在browser中完美运行，但是当我来到移动网站时。它不适合浏览器的宽度。

.bcg {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
}
/* Slide 1 */
#slide-1 .bcg {background-image:url('../img/1-1.png'); max-width: 100%}

/* Slide 2 */
#slide-2 .bcg {background-image:url('../img/2-2.png'); max-width: 100%}

/* Slide 3 */
#slide-3 .bcg {background-image:url('../img/3-3.png'); max-width: 100%}

/* Slide 4 */
#slide-4 .bcg {background-image:url('../img/4-4.png'); max-width: 100%}

我已将max-width：100％放置在我的图片上，但在browser尺寸缩小时却没有响应。

Answer 1

当您想要使图像响应时，您可以将图像包装在容器内并赋予其100％宽度。然后将img设置为width：100％和height：auto;它会根据容器的大小神奇地调整大小。

div{width:100%;}
img{width:100%; height:auto;}

DEMO： http://jsfiddle.net/atsFA/13/

尝试调整浏览器的大小，您会看到该图像与容器一起调整大小。

在您的情况下，您没有使用img标签，而是使用背景图片，因此您可以使用background-size:cover;而不需要设置最大宽度。

.bcg {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
}

#slide-1 .bcg {background-image:url('../img/1-1.png'); background-size:cover;}    

#slide-2 .bcg {background-image:url('../img/2-2.png'); background-size:cover;}    

#slide-3 .bcg {background-image:url('../img/3-3.png'); background-size:cover;}    

#slide-4 .bcg {background-image:url('../img/4-4.png'); background-size:cover;}

编辑

我编辑了我的小提琴。在您的情况下，background-size:cover;无效，因为您始终需要为容器明确设置宽度和高度。

http://jsfiddle.net/atsFA/15/

使图像响应移动网站/浏览器

1 个答案: