0

背景画像を背景として使用する高さ600pxのヘッダーがあります。画面が 1600px を超える場合は、カバーを使用し、デフォルトはコンテインです。ヘッダーをオーバーレイするのは、高さ 500px の 1 つの画像 (絶対配置) です。

ブラウザーのサイズを変更すると、ヘッダーの高さが維持されません。これは、ヘッダーに重なっているオーバーレイ イメージで簡単に確認できます。

コードは次のとおりです。

/* ===== HEADER ==== */

header{
height: 600px;
min-height:600px;
width:100%;
min-width:100%;
background-image: url(../images/headerBG.jpg);
background-repeat: no-repeat;
background-size: contain;

}
#bgOverlay{
position: absolute;
top: 60px;
left: 30%;
}

/* ==== MEDIA QUERIES   ==== */
@media only screen and (min-width:1600px){
header{background-size: cover;}
}

そして、それを見るためのリンク: http://www.madebym.net/test/crazysunsets/index.html

4

1 に答える 1

0

私の問題を解決するには、適用する必要があります: background-size: 100% 600px;

このように、ヘッダーは常に 600 ピクセルの高さで、画像は縦横比を維持します。

于 2012-12-17T22:22:27.120 に答える