作为响应式设计的背景图像

问题描述：

如果我有这组divs，如何在浏览器调整大小时更改每个背景图像的尺寸？基本上把盒子的所有内容作为响应式设计。作为响应式设计的背景图像

所以最大宽度是图像的尺寸。

<div class="box"> 
    <div class="dog_1"></div> 
    <div class="dog_2"></div> 
    <div class="dog_3"></div> 
    <div class="dog_4"></div> 
</div> 

div[class*='dog_'] { 
    background: url("http://ecx.images-amazon.com/images/I/419c%2BE2j0kL._SL500_AA300_.jpg"); 
    background-repeat: no-repeat; 
    height:200px 
}

演示在这里： http://jsfiddle.net/LPKkk/

你的jsfiddle链接是错误的 –

谢谢，更新 – anvd

答

你可以使用背景-size属性： https://developer.mozilla.org/en-US/docs/CSS/background-size

然而它在IE7中不受支持& 8.如果您需要支持这些浏览器，则可能必须使用基于百分比宽度和高度的图像元素，而不是背景图像或IE的专有过滤器。例如：

约IE图像过滤器

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../background.png', sizingMethod='scale');

一件事是，所述图像路径相对于HTML文档（等的元件），而不是相对于像一个正常的背景图像的CSS文件。

答

您可以使用CSS3 background-size: cover/contain;属性缩放背景图片：http://jsfiddle.net/LPKkk/1/

答

background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover !important; 
    -moz-background-size: cover !important; 
    -o-background-size: cover !important; 
    background-size: cover !important;

（我不得不使用某种原因！重要的是得到了盖最后一次工作）

这里有一个link to few other approaches too。

作为响应式设计的背景图像

相关推荐