0

如果我有这组 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/

4

3 回答 3

2

您可以使用 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 文档，如普通背景图像。

于 2012-12-20T00:26:34.637 回答
0

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

于 2012-12-20T00:26:14.850 回答
0 
    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;

（由于某种原因，我不得不使用 !important 才能让封面上次工作）

这里也是一些其他方法的链接。

于 2013-01-03T01:00:16.263 回答