5

画像のサイズをおそらく知ることができない状況があります (独自の制限された cms...)

網膜レベルの画像を表示する方法を理解する必要があり、(可能であれば) JavaScript を使用せずに表示したいです。

私は使用しています：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {}

しかし、それは背景画像を持つ要素でのみ役に立ちました。問題の画像は背景画像にすることはできません（サイズがわからないため...）これを理解する方法は何ですか？

と がlogo.pngありlogo2x.png、適用可能なマークアップは次のようになります。

<h1 id="logo">
  <a href="/">
    <img src="images/logo.png">
  </a>
</h1>

これはJavaScriptなしで可能ですか？Webkit (この場合は ios/iphone) で動作する限り、非標準の css を使用することに反対しているわけではありません。logo.png通常のブラウザで表示したいがlogo2x.png、ピクセル比が2以上のブラウザで表示したい。

4

2 に答える 2

3

このトリックを実行できます: すべての画像を出力し、関連する画像のみを各デバイスに表示します:

HTML マークアップ:

<h1 id="logo">
  <a href="/">
    <img class="logo logo_normal" src="images/logo.png" />
    <img class="logo logo_retina" src="images/logo2x.png" />
  </a>
</h1>

CSS スタイル:

.logo_retina { display: none; }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .logo_normal { display: none; }
    .logo_retina { display: block; }
}

また、この「アダプティブ イメージ」</a>ソリューションを使用して、html5doctorのアダプティブ イメージ サガ

更新： ダブレットリンク

HTML:

<h1><a class="logo ir" href="/">BRAND</a></h1>

CSS:

#logo a {
    display: block;
    width: 200px;
    height: 200px;
    background: url('//placekitten.com/200');
}

@media  (-webkit-min-device-pixel-ratio:1.5),
        (min--moz-device-pixel-ratio:1.5),
        (-o-min-device-pixel-ratio:3/2),
        (min-resolution:1.5dppx) {
    #logo a {
        background: url('//placekitten.com/400');
    }
}
于 2012-06-09T05:40:31.927 に答える
1

この問題について自分で考えてみた - x2 画像を使用して、画像のピクセル寸法を確実に設定するのはどうですか? Retina ディスプレイでは 1:1 で表示され、非 Retina ディスプレイでは 50% で表示されます。ただし、すべてのクライアントは x2 バージョンをロードする必要があるため、トラフィックが増加します。

于 2012-08-25T17:57:22.537 に答える