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();

背景大小和位置替代＆lt; IE 9

1 个答案:

更新