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

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 文档。