Question

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

注意：如果可能，我需要当前的边距和高度百分比，因为徽标可以是中心的，并且适合大多数设备的比例。例如我不想要固定的宽度

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%;
    }

Answer 1

可能最好不要将图像用作背景图像。

只需将其作为普通的img标记放在页面上 - 可能在DIV中。

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

img {
    max-width: 100%;
}

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

Answer 2

背景大小：包含/覆盖规则不存在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')";

或者你可以尝试这个https://github.com/louisremi/jquery.backgroundSize.js

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

IE CSS背景图像解决方案

2 个答案: