1

レスポンシブ背景の使用に問題があります。http://poppykeith.co.uk/index.htmlは、コンピューター ブラウザーでは正しく表示され、モバイル ブラウザーでは横向きに表示されますが、モバイル (iOS を使用している) で縦向きに表示すると、画像は画面に合わせて縮小されます。

画像をポートレートモードで拡大するだけで、引き伸ばさないようにするにはどうすればよいですか?

ありがとう

4

2 に答える 2

5

あなたが書いたコードはほとんど機能しますが、min-width:1024pxと のwidth:100%ルールが互いに競合し、ご覧のように押しつぶされた効果が生じています。基本的にはwidth切り札min-width。

使用したい実際の手法は、その画像を body 要素の背景として設定し、それを使用background-size:coverしてブラウザーに適切にロードさせることです

body { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

詳細: http://css-tricks.com/perfect-full-page-background-image/

于 2012-06-26T22:23:06.823 に答える
0

この記事をチェックしてください: http://www.teknocat.org/blog/web-development/show/6/mobile-safari-background-image-scaling-quirk

Mobile Safari が大きな画像を縮小する方法について説明しています。

于 2012-06-26T22:20:35.253 に答える