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

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% and height:auto;它会根据容器的大小神奇地调整大小。

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

演示： 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/