Question

我有一个200px乘200px的div。

它的背景图像是500px x 500px。

有没有办法确保整个背景图片适合div？我知道你可以使用CSS3调整大小，但我正在寻找旧版浏览器的解决方案。

由于

Answer 1

有没有办法确保整个背景图片适合div？

background-size property。

我知道您可以使用CSS3调整大小，但我正在为旧浏览器寻找解决方案。

没有其他标准方法可以缩放背景图像。

可以通过non-standard filter property和AlphaImageLoader支持较早版本的Internet Explorer。

/* Untested */
background-image: url(images/someimage.png);
background-resize: cover;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";

或者，作为hack，您可以使用<img>元素，并将其绝对放在内容后面。这将是一个内容图像，所以它不会是一个干净的黑客。

Answer 2

假设你的div的id等于“myid”。

使用的图片尺寸为500x500

演示：http://jsfiddle.net/abdennour/rhPDx/

div#myid{
   width: 200px;
    height:200px;

  background: url('http://px6.streetfire.net/0001/72/25/1952752_600.jpg') 
                0% 0% 
                no-repeat;
  background-size: 200px 200px;


}

Answer 3

您可以通过将background-size:100% 100%;应用到div

来实现同样的目标

希望它会有所帮助

Answer 4

您无法在背景图像属性中调整图像大小。

还有另一种棘手的方法。只需将背景图像放在div中并为其添加绝对位置即可。 Ofc ur div需要有一个相对postion属性。

在此之后，您只需使用css2即可调整图像大小。

调整背景图片的大小？

4 个答案: