15

http://www.flywavez.comの一時ページで作業していますが、画像のサイズを変更してすべての画面解像度で同じにすることができません。iPhone では、腰の前で女の子が切り取られ、解像度が 1366 x 768 の 19 インチのラップトップ画面で見ると完全にフィットし、ラップトップから VGA 経由でビデオを 55 インチのテレビに送った場合でも完璧にフィットします。ただし、より大きな解像度の大きなモニターで表示すると、画像サイズの終わりに大きなスペースと明らかなビューがあります. /* Tablet Landscape */ @media screen と (max-width: 1060px) { #wrapper { width:67%; で CSS のサイズを変更したと思いました。} }

    /* Tabled Portrait */
    @media screen and (max-width: 768px) {
        #wrapper { width:100%; }
     }

    /* Tabled Portrait */
    @media screen and (max-width: 768px) {
        #wrapper { width:100%; }
     }

     /* iphone */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
        img { max-width: 100%; }
    }

    /* ipad */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
img { max-width: 100%; }
    }

1366 x 768 で見たときと同じように、この画像をすべての解像度で表示したい.

助けてくれてありがとう。

4

3 に答える 3

7

cover このキーワードは、背景画像の両方の寸法が対応する背景配置領域の寸法以上であることを保証しながら、背景画像をできるだけ小さくスケーリングする必要があることを指定します。

このキーワードは、背景画像の両方の寸法が背景配置領域の対応する寸法以下であることを保証しながら、背景画像をできるだけ大きくスケーリングする必要があることを指定します。したがって、カバーの代わりに含むを使用してみてください

100% トリミングせずに、高さと幅の両方を 100% に拡大します。

body {
        background: url('images/example.jpg') no-repeat fixed;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
于 2014-10-21T07:29:21.103 に答える
0

基本的に、これはあなたが必要とするすべてです：

body {
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}
于 2016-12-13T11:40:02.610 に答える