画像のサイズを変更し、どんな画面にも同じようにフィットするようにするCSS

http://www.flywavez.com、臨時のページで作業しているのですが、画像のサイズを変更して、すべての画面解像度で同じにすることができません。iPhoneでは、腰の前で女の子がカットされ、私の19"のラップトップ画面で1366 x 768の解像度で見たときは完全にフィットし、ラップトップからVGA経由で私の55"のテレビにビデオを供給したときでもフィットしています。しかし、より大きな解像度のモニターで見ると、画像サイズが終わるところに大きな空間があり、明らかに見えてしまいます。CSSでリサイズしているつもりだったのですが / タブレット端末の風景 / @media screen and (max-width: 1060px) {。

wrapper { width:67%; }.

     }

    /* 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×768で見たときのように表示させたい。

何かとお世話になります。

プログラミング
image css responsive-design
1日 11月 2013 в 3:57
21 ビュー
ソリューション

画像比率を落とさずに、やろうとしていることを実現するのは根本的に不可能だと思いますし、おそらく望ましくないことだと思います。background-size'プロパティを使用することを検討されましたか？以下のcssは、かなり良い外観を実現しています：

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

こちらでご覧いただけます：http://jsfiddle.net/DTN54/

Phil
編集した答え 22日 8月 2017 в 2:31
解説 (2)

cover このキーワードは、背景画像をできるだけ小さくし、かつ、その寸法が背景配置領域の対応する寸法以上であることを指定するものである。

contain このキーワードは、背景画像をできるだけ大きくし、その寸法が背景配置領域の対応する寸法以下であることを保証するものです。そのため、coverの代わりにcontainを使用してみてください。

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;
    }
0_jump
編集した答え 2日 11月 2017 в 10:37
解説 (0)

基本的にはこれだけあれば大丈夫です：

body {
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}
deChristo
編集した答え 13日 12月 2016 в 12:09
解説 (0)