Question

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

因此最大宽度是图像的尺寸。

<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/

Answer 1

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

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

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

IE图像过滤器的一个方面是图像路径相对于HTML文档（如元素），而不是像普通背景图像那样相对于CSS文档。

Answer 2

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

Answer 3

    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。

背景图像作为响应设计

3 个答案: