私のDivを1024 x 768 pxに設定

Question

幅x高さが1024px x 768pxの背景画像でDivを作成しようとしています。そしてそれはブラウザウィンドウ全体に適合しなければならない。

私はフルスクリーンを占有画像を実現でき、以下のCSSを使用しますが、画像は、私は、CSSの下に使用して幅と高さを設定するための@mediaオプションを試してみました

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
     } 

    #wrapper { 
      background-image : url(home.jpg); 
      background-position: top center !important; 
      background-repeat: no-repeat !important; 
      background-size: cover; 
      background-position: center; 
      min-height: 100%; 
      width : 100%; 
      height : 100%; 
     } 

     #container { 
      height: 100%; 
     } 

をトリミングしますが、今、私は、スクロールとの完全な画像を取得します白いスペースはイメージがフルスクリーンを占めていないことを意味します。

html, body { 
    height: 768px; 
    width: 1024px; 
    margin: 0; 
    padding: 0; 
     } 

#wrapper { 
      background-image : url(home.jpg); 
      background-position: top center !important; 
      background-repeat: no-repeat !important; 
      background-size: cover; 
      background-position: center; 
      height: 768px; 
      width: 1024px; 

     } 

     #container { 
      height: 100%; 
     } 

@media (min-width:769px) and (max-width:1024px){ 
    // your code 
} 

誰かが私はそれを達成し、それはすべてのブラウザで動作するように持っていることができる方法:(

Answer 1

あなた画面解像度があなたのブラウザ解像度と一致する必要はありません。あなたは、ブラウザのクロマ（タイトルバー、アドレス、ブックマークなど）を持って、あなたはOSのUI（トン持つことに注意してください尋ねるバー/ランチャーなど）

大型の画面（例：バー/ランチャー）を使用している場合は、正確なサイズはになります。 1600x900）、それ以外の場合は問題が発生します。

しかし、実際には、実際にはと言って、実際にと同じサイズにしたいとします。

あなたはコンテナにリサイズされた画像を持っている（スペックhereを参照）、top leftに画像を配置しますので、（代わりにtop centerの）、background-size: contain;の賛成でbackground-size: cover;を捨てる必要があります。サイドノートとして

は、私はあなたが vhと vwユニットを使用することをお勧め：

#wrapper { width: 100vw; height: 100vh; max-width: 1024px; max-height: 768px; } 

この方法であなたは、特定の解像度でユーザーをロックしません。

Answer 2

あなたは次のように* 720 1024であるだけで行うどのサイズのdivを取得するためにコードの下に追加する私を導くことができます。

@media body 
{ 

    width:1024px; 
    height:720px; 

}