Internet explorer IE CSS背景图像处理

下面是页面顶部我的徽标CSS代码，该代码根据除IE8和以下浏览器之外的所有浏览器中的用户设备大小调整自身大小。它似乎可以很好地约束徽标的原始比例，但是IE8和以下浏览器似乎忽略了约束比例，并将图像拉伸到最大尺寸，例如90%屏幕宽度。什么是IE的遗留/回退代码来防止这种行为发生

注意：如果可能的话，我需要当前的边距和高度百分比，因为对于大多数设备来说，标志是中心的，并且比例适当。e、 我不想要固定的宽度

CSS代码

#logo-bounding-box {
      background-image: url(../img/logo.png);
      background-size: contain;
      position:relative;
      background-repeat: no-repeat;
      margin:0 auto 0 auto;
      background-position:center;
      height: 90%;
      width: 90%;
    }

---

最好不要将图像用作背景图像

只需将它作为一个普通的img标签放在页面上-可能在一个DIV中

<div class="logo"><img src="logo.png" alt=""></div>

img {
    max-width: 100%;
}

.logo {
    width: 90%;
    margin: 0 auto;
}

img{
最大宽度：100%；
}
.标志{
宽度：90%；
保证金：0自动；
}

背景大小：包含/覆盖规则不存在lt-ie9，因此您需要使用一些备用规则。有一些ie过滤器可以工作：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif', sizingMethod='scale')";

或者你可以试试这个

---

或者只使用img元素集拉伸到其容器，如前所述。

当您谈论90%时，假设其父元素的90%，与高度/宽度无关，因此最好将其设置为最小高度：90%；高度：200px！重要的；可能的重复虽然这并没有完全解决我的问题，但我使用此代码和媒体查询来调整我的徽标大小，以便您可以得到正确的答案；）