< IE 9 的背景大小和位置替代

Question

我对旧 IE 上的 background 属性有疑问。我有一个动态网站，用户可以在其中创建自己的 Pinterest 之类的帖子，其中包含图像和一些文本。过去，当它将图像适合特定的高度或宽度（没有任何类型的图像裁剪逻辑）时，我发现了类似

.image-wrapper {
  background-image: url('some/url.png');
  background-position: center center;
  background-size: cover;
}

成为最好的方法。

但是对于即将到来的项目，我需要保证它也适用于 IE 8，因为 caniuse.com 说它不适合它，我需要一些建议如何将图像适应特定的高度和宽度知道用户想要上传的图片的比例。

我更喜欢仅使用 CSS 的方式，但如果那不令人满意，我也可以使用 JS/jQuery。

Answer 1

你引用的是CSS background-position edge offsets，这是一个3到4个项目的语法（假设你想做bottom 4px right 10px从右下角偏移4和10px）。 IE8 确实支持二值语法（又名center center，你引用的那个）。可以看到，从版本 4 开始，它就有了基本的支持（二值语法）：https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#Browser_compatibility

但是，您的背景大小问题并不容易解决。通常使用 IE8 的计算机的分辨率不大于 1320x768，因此请确保您的图像是该尺寸。否则，您可以尝试将您的图像作为第一个元素添加到图像标签中，并为其指定 100% 的最小高度和最小宽度；

<div id="Container">
    <img src="bg.jpg" class="background" />
</div>

#Container {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
}
.background {
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    position: absolute; /* need it for z-index and to make sure content overlaps */
    z-index: -1; /* z-index is supported since IE4 */
}

更新

我将overflow: hidden; position: relative; 添加到#Container。此外，如果你沿着这条路线走，一个让现代浏览器的图像居中的好方法是：

.background:nth-child(n){
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

否则，使用javascript：

$(this).resize(function(){
    $(".background").each(function(){
        var w = $(this).innerWidth() / 2;
        var h = $(this).innerHeight() / 2;
        $(this).css({
            "left" : "50%",
            "top" : "50%",
            "margin-left" : -w + "px",
            "margin-top" : -h + "px"
        });
    });
});
$(this).resize();