web-dev-qa-db-ja.com

画像を任意の画面と同じサイズに変更するCSS

http://www.flywavez.com で一時ページを操作していますが、画像のサイズを変更してすべての画面解像度で同じにすることはできません。 iPhoneでは、女の子が腰の前で切れてしまい、解像度が1366 x 768の19インチのラップトップ画面で見ると、ラップトップからVGA経由で55インチのテレビにビデオを送っても、完璧にフィットします。しかし、より大きなモニターでより高い解像度で見ると、大きなスペースがあり、画像サイズが終わるところがはっきりと見えます。/* Tablet Landscape */@media screenおよび（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 x 768で見られるように、この画像をすべての解像度で表示したい。

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

cssimageresponsive-design
14
abtecas

おそらく望ましくない画像比率を失うことなく、あなたがやろうとしていることを達成することは基本的に不可能だと思います。 '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/

26
onestepcreative

このキーワードは、両方の寸法が背景位置決め領域の対応する寸法以上であることを保証しながら、背景画像を可能な限り小さくスケーリングすることを指定します。

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

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;
    }
7
Riya Travel

基本的には、これが必要なすべてです。

body {
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}
0
ene sorin