画像をサイズ変更して画面に合わせるCSS

Question

私はhttp://www.flywavez.comという一時ページで作業していましたが、サイズを変更してすべての画面解像度で画像を取得できません。 iPhoneの場合、腰の前で女の子をカットし、1366 x 768の解像度で私の19インチノートパソコンの画面で見ると完璧にフィットし、ラップトップからVGAを介して55インチのテレビにビデオを供給しても完璧にフィットします。しかし、より大きな解像度の大きなモニターで見ると、画像サイズが終了する大きなスペースと明瞭なビューがあります。私は /* Tablet Landscape */ @mediaの画面と（最大幅：1060px）{ を持つ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%; } 
    } 

私は任意の助け×768 1366の

おかげで見たときにそれがないと、この画像は、すべての解像度で表示したいです。

Answer 1

イメージ比を失うことなく、あなたがやろうとしていることを達成することは基本的に不可能だと思いますが、これはおそらく望ましくありません。 'background-size'プロパティの使用を検討しましたか？

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/

Answer 2

カバーこのキーワードは、背景画像はその両方の寸法は確保しながら、可能な限り小さくなるようにスケーリングする必要があることを指定するCSSは以下のかなり良い外観を実現します背景位置決め領域の対応する寸法以上である。

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

Answer 3

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

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