1

下面是我在页面顶部的徽标的 CSS 代码，它在除 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%;
    }
4

2 回答 2

0

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

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

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

img {
    max-width: 100%;
}

.logo {
    width: 90%;
    margin: 0 auto;
}
于 2013-03-12T11:56:27.407 回答
0

background-size: contains/cover 规则不存在 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 元素集来拉伸到它的容器，如前所述。

于 2013-03-12T12:33:47.633 回答