html - Size a background image?

Question

I have a div that is 200px by 200px.

It's background image is 500px x 500px.

Is there a way to make sure the entire background image fits into the div? I know you can size it with CSS3 but i'm looking for a solution for older browsers.

Thanks

Answer 1

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

background-size财产。_

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

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

---

旧版本的 Internet Explorer 可以通过非标准filter属性和AlphaImageLoader.

/* 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')";

---

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

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 你的 div 需要有一个相对的位置属性。

在此之后，您可以简单地使用 css2 调整您的图像大小。