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

  • Z时代
  • 2024-01-10
  • 分类：问答

如果我有这组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("/wp-content/uploads/new2022/20220327voicc/104152347.jpg"); 
    background-repeat: no-repeat; 
    height:200px 
}

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

回答：

你可以使用背景-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。

以上是 作为响应式设计的背景图像 的全部内容， 来源链接： utcz.com/qa/261184.html

回到顶部