縦の長さを維持したレスポンシブデザインにするには？

Question

プログラミング初心者です。
このサイト（http://flat-plat.com/）のトップ画像（左に人、その隣に帽子がある画像）について質問です。
このサイト、ブラウザの幅を狭めると、レスポンシブ対応になっているのがわかるかと思うのですが、幅を狭めてスマホぐらいのサイズにすると、トップ画像にあった人がいなくなって、帽子だけになっています。でも、画像の縦の長さ（height）は長いままです。
普通の（？）レスポンシブにすると、画像の縦横比が維持されたままになってしまうのが嫌で、このサイトのように、ある程度縦の長さを維持したままレスポンシブにしたいです。
ちなみに、私はBootstrapを使っています。ある程度縦の長さを維持したままレスポンシブにするにはどうしたらよいのでしょうか？（どうすればこのサイトのトップ画像のようになるのでしょうか？）
ご教授いただきたいです。宜しくお願い致します。

Answer 1

ソースを見れば分かると思いますが、背景画像の伸縮は下記の指定でやっていますね。

background-position: center bottom;
background-size: cover;

あと高さ指定はしておらず、中にある要素で決まっているようです。

尚、任意の比率でレスポンシブする場合、下記の記事が参考になります。
【レスポンシブコーディング】要素の横幅と高さの比率を保つ

Answer 2

背景のある要素自体の高さは、viewportの高さから計算して設定していると思います。
ターゲットブラウザが新しいものであればCSSのvhという単位が利用できますし、
CSSが対応していなければ、resizeに応じてJavaScriptで実装することになります。

要素の高ささえ取れていれば、写真は

background-size: cover;

を指定すれば勝手に要素いっぱいに引き伸ばされます。

Comments

[YSKZ]

おっしゃる通り、画像の高さを決めて、
「background-size: cover;」
を記述すればできました。
助かりました。ありがとうございました。