1

以下は、ページ上部にある私のロゴの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%;
    }
4

2 に答える 2

0

background-size：contain / coverルールはlt-ie9に存在しないため、フォールバックを使用する必要があります。動作する可能性のあるいくつかのすなわちフィルターがあります：

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 に答える
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 に答える