3

これは私のコードです：

HTML

<div class="sfondo-interne-8601">
    <div style="height:1200px; width:900px;">
        Test
    </div>
</div>

CSS

.sfondo-interne-8601
{
    background-image:url('http://www.deviantart.com/download/247331565/moonlit_tears_by_lifesequencebreak-d439699.png') !important;   
    background-repeat:no-repeat;
    background-position:center top;
}

さて、iPadでテストするページを作成してみてください：それはうまく機能します（画像はpngです）。

ここで、画像をjpgで変更してみてください（ここではすでに1つ選択しています）。新しい画像のサイズが変更され（どのルールかわからない）、HTMLドキュメント全体の中央/上部に中央揃えになります。

なんで？そして、どうすればそれを修正できますか？iPadに制限はありますか？

1150px（高さとして）より遅い.jpgを使用すると、それも機能することに気づきました。Safariのバグ？

4

1 に答える 1

2

iOSでは、2MPを超えるjpeg画像がサブサンプリングされ（「リソース制限」を参照）、画像のサイズが効果的に変更されます。

これは、CSSをまたはbackground-sizeに設定した場合にはそれほど明白ではないと推測します（それでも発生しますが、アスペクト比は影響を受けず、バックグラウンドサイジングアルゴリズムは引き続き実行されるため）containcover

background-size: 1920px 1200pxサブサンプリングされた背景画像を元のサイズでレンダリングし続ける場合は、 ：beforeとafterを追加できます。

于 2012-09-11T09:14:26.397 に答える