質問: 初めまして、HTML/CSS 3ヶ月です。 レスポンシブデザインまで勉強しました。 https://code-step.com/recipe-menu/ 上記ページを例に模写コーディングをしています。 ・前提 上記ページの「デザインイメージ」部の「▼PC表示」は完成しました。 「▼スマホ表示」を実装したいのですがうまくできません。 ・要件 「▼スマホ表示」のheader部の画像(椅子が3つ映っている画像)と同じように 画像を縦長にしたいです。 また、他にも方法があればご教授よろしくお願いします。
回答: こんにちは。 縦長にしたい画像は、背景画像で設定していますか? その場合、背景画像を設定している要素の高さをvhという単位で設定してはどうでしょうか。 スマホなので、ウィンドウそのものが縦長であるので、 背景画像も縦長になりそうではあります。 background-sizeをcoverにするのも、必要かもしれません。