レスポンシブでスマホ画像をPC同様に全画面が表示されるようCSSをセットしたい

Question

同じ画像をセットしていますが、（レスポンシブ対応で）PCとスマホで見え方が異なる（PCは画像全部がみえて、スマホは一部分しか表示されてない）ので、スマホで最適な表示をさせたいです。最適というのは、レスポンシブで、PC・スマホどちらも画像の全画面を表示させたいと思っております。

CSSのどの部分を修正すればいいか教えていただけたら幸いです。
宜しくお願いします。

Comments

[K_3578]

まずそのcssを追記しましょう。
それと、PCとスマホでどのように表示が異なるのかも画像などで示して下さい。

[daidaikichi]

失礼しました。不慣れなもので、もう少し分かりやすいようにアップデートさせていただきます。

[K_3578]

初心者の方ならこちらを参考に質問修正してみてください。
https://teratail.com/help/question-tips

[meg_]

> CSSのどの部分を修正すればいいか教えていただけたら幸いです。
そのCSSを載せ忘れていませんか？

Answer 1

CSSで画像サイズをpxではなく％で指定するとデバイスによって自動調整されます。
widthを100％にすると横画面が埋まり、高さが自動調節されるため、不具合が起こりません。

良い例
img{
width: 100%;
height:100%;
}

悪い例
img{
width: 100px;
height:100px;
}