9

次のものが必要です。

  • コンテンツのない空の div
  • divに設定された背景画像
  • 背景画像はサイズ変更時に流動的/応答的になります 固定に設定できません
  • div のディメンション

背景画像のサイズをサポートするために div を開いて強制的に開くことはできません。どんな助けでも大歓迎です...

http://www.everymountain.us/

<header id="header">
<div class="wrapper">
<div class="inner">
<div class="top_banner"></div>
</div>
<div class="clear"></div>
</div>
</header>

.front #header .top_banner { background: url('images/bg_front.jpg') no-repeat;   background-size: cover; }
4

4 に答える 4

0

さまざまな固定高さを処理するために、さまざまな画面サイズに対して CSS でメディア クエリを使用してみてください。例えば：

@media (min-width: 1200px) { 
    div { height: 3em; } 
}
@media (min-width: 768px) and (max-width: 979px) { 
    div { height: 2em; } 
}
@media (max-width: 767px) { 
    div {  height: 1.2em; } 
}
@media (max-width: 480px) { 
    div {  height: 1em; } 
    }

など、カスタマイズする必要があるもの。すべての画面と background-size:cover に合わせて div 幅を 100% のままにすることができます。画面サイズごとに異なるサイズの背景 (差分ファイル) を作成して、モバイルまたはタブレット デバイス用の Web サイトのサイズを小さくすることもできます。

于 2013-05-15T15:55:31.040 に答える