HTMLCSS スマホ表示

Question

初めまして、HTML/CSS　3ヶ月です。
レスポンシブデザインまで勉強しました。

https://code-step.com/recipe-menu/
上記ページを例に模写コーディングをしています。

・前提
上記ページの「デザインイメージ」部の「▼ＰＣ表示」は完成しました。
「▼スマホ表示」を実装したいのですがうまくできません。
・要件
「▼スマホ表示」のheader部の画像（椅子が３つ映っている画像）と同じように
画像を縦長にしたいです。

また、他にも方法があればご教授よろしくお願いします。

Comments

[m.ts10806]

質問タグで表現できることは書かなくて良いです。
「初心者」も質問に「初心者アイコン」をつけるだけで良いです。
タイトルが内容と合致してませんし、要件がほぼないので要件を記載してください。
可能なら質問テンプレートを利用してください。

[m.ts10806]

レスポンシブデザインは分かるのでしょうか。

[Rabitttt]

すみません、了解しました。
レスポンシブデザインわかります。

[Lhankor_Mhy]

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

Answer 1

こんにちは。
縦長にしたい画像は、背景画像で設定していますか？
その場合、背景画像を設定している要素の高さをvhという単位で設定してはどうでしょうか。

スマホなので、ウィンドウそのものが縦長であるので、
背景画像も縦長になりそうではあります。

background-sizeをcoverにするのも、必要かもしれません。