1

通常表示用 (350px x 43px) と網膜用 (700px x 86px) の 2 つの画像を作成しました。以下のコードを使用すると、画像の変更に関して想定どおりにすべてが機能しますが、hi-res.jpg は 700px x 86px の実際のサイズで表示されていますか? 私は網膜グラフィックスにまったく慣れていないため、これを修正する正しい方法がわかりません。両方の画像は、幅 350 ピクセル、高さ 43 ピクセルの div 内にある必要があります。

Retina ディスプレイでは 1 インチあたりのピクセル数が非常に多いため、より大きな画像が必要になるのではないかと考えました。より大きな画像を作成しましたが、それを div 内に含めて正しく表示するにはどうすればよいですか?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
    .retina-logo{
        display: block;
        text-align: center; 
        max-height: 43px; 
        max-width: 350px; 
        margin-top: 15px;
    }
}

HTML

<div class="logo"><img src="elements/logo.jpg"></img></div>
<div class="retina-logo"><img src="elements/hi-res-logo.jpg"></img></div>

助けてくれてありがとう。私はこれを修正するためにあらゆる種類のcssを試してきました!

4

2 に答える 2

1

div は画像に適したサイズですが、画像自体の高さと幅も設定する必要があります。デフォルトでは、画像は拡大縮小されません。次のようなことを試してください：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
    .retina-logo{
        display: block;
        text-align: center; 
        max-height: 43px; 
        max-width: 350px; 
        margin-top: 15px;
    }
    .retina-logo img{
       width: 100%;
       height: auto;
    }
}
于 2014-06-18T16:19:29.813 に答える