HTML/CSSにおいて、『ウインドウ幅に合わせて画像サイズを変更する方法』を紹介します。
こんな人にオススメ
- HTML/CSSでウインドウ幅に合わせて画像サイズを変更したい
目次
ウインドウ幅に合わせて画像サイズを変更するNGな記載方法
以下に私が失敗したNGなパターンを記載します。
NGパターン：画面幅を指定しない
サイズを指定しないと元の画像サイズがそのまま表示されます。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- 画像幅から画像がはみ出してしまう
ウインドウ幅に合わせて画像サイズを変更する方法
では解決方法を紹介します。
OKパターン：imgタグに『width:100%』を指定
imgタグに対して『width:100%』を指定することで親要素に対し画面いっぱいに表示します。
ウインドウ幅いっぱいに画像が表示され、ウインドウ幅を変更しても画面いっぱいに表示されます。
縦方向のサイズも指定してしまうと、アスペクト比が崩れてしまうので『height:auto』にしておきます。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- ウインドウ幅に合わせた画像サイズとなる
イメージ通りの配置ができました。
本格的にHTML/CSSを学びたい方は
本格的にHTML/CSSを学びたい方は『TechAcademy(テックアカデミー)』がオススメです。
- 現役エンジニアによるマンツーマンサポート
- はじめての副業に必要なスキルが学べる
- 無料メンター相談が可能
「短期間で集中して学びたい」「本格的に仕事にしたい」と考えている方はまずは無料メンター相談から初めて見てはいかがでしょうか
↓気になる方は下記リンクを参照
まとめ
今回は、HTML/CSSにおいて、『ウインドウ幅に合わせて画像サイズを変更する方法』を紹介させていただきました。
まとめ
- imgタグに『width:100%』を指定
皆さまの参考になれば幸いです。
コメント