バナーと見出し

Question

タイトルとボタンの上にイメージを作成したいだけです。

テキストとボタンは、幅が設定されたコンテナ内にある必要があります。私はちょうどそれを行うための最善の方法を知りたい。

あなたはインターネット上で混乱させる方法がたくさんあり、どちらが一番良いのかわかりません！

Answer 1

背景画像のアスペクト比が常に同じ場合、コンテナの高さを背景画像の幅に比例させることができます。

背景画像が2000×1000ピクセルであるとします。画面の幅が現在800ピクセルであるとします。次に、背景イメージのあるコンテナを400ピクセル高くします。ハードコードされたブレークポイントを設定せずにこれを達成するには、 "パディングトリック"を使用できます。子要素のパディング（上端または下端）をパーセントで設定すると、高さは親要素の幅のパーセンテージとして計算されます。したがって、コンテナのパディングトップを50％に設定すると、親要素の幅が半分になります。したがって、2000 x 1000 pxの場合：1000/2000 * 100 = 50％。あなたが比較的コンテナを配置する必要があり、それは例えば、トップ値とボトム値とボタンとヘッダ子供絶対だそのようなシナリオで

.parent_w_bg { 
    background-image: url(...); 
    width: 100%; 
} 
.container { 
    width: 500px; 
    margin: 0 auto; 
    padding-top: 50%; // Assuming the background image's aspect ratio is 1:2 
} 

<div class="parent_w_bg"> 
    <div class="container"> 
    Header and button etc. 
    </div> 
</div> 

。ここで

シンプルフィドル：別のブレークポイントのために複数の画像サイズを使用してhttps://jsfiddle.net/mmcc5rnk/

が有用でなく、問題となる可能性があります。特定のケース、イメージのサイズ、使用するブレークポイントの量（およびその違い）によって異なります。指定されたブレークポイントに応じて異なるイメージを使用することは問題なく、実装に関係なく使用できます。

Answer 2

セクション全体の高さを設定することは、プロジェクトの要件に指定されていない限り、決して良い考えではありません。あなたのセクションを垂直に伸ばすために、常に内側のコンテンツに依存します。

背景について - 複数の画像を使用している場合、共通の背景設定でさまざまなサイズと位置を適用できるため、ビューポートのサイズが変更されたときや再配置が可能になります。 、あなたは、単にそのようcoverに画像の背景のサイズを設定することができます。

background: url('images/image.jpg') no-repeat center center/cover; 

あり、あなたの目標を達成するための多くの方法がありますが、物事の、最新の方法は、Flexbox model.

を使用していますすべてのflexboxのプロパティはprefiでなければなりませんこれにより、すべてのブラウザで動作するようになります。

Flexがどのように機能しているかを説明すると、答えが広すぎるため、基礎から学ぶ必要があります。

あなたの目的を表すFiddleです。

Answer 3

No need to add different images for each breakpoint, 
image will resize automatically, you can add dynamic height by using jQuery 

Demo here