HTML | 画像のサイズを変更、親要素や画面の幅に合わせる方法

2023-10-09HTML 画像,HTML

HTMLだけで画像のサイズを変更、または親要素、ウィンドウやスマホ画面の幅に合わせる方法とサンプルコードを紹介しています。

HTMLで画像のサイズを変更する

HTMLだけで画像のサイズを変更するには、「style」属性にて「width」または「height」プロパティを指定します。

「width」「height」の単位は「px」のほか、親要素のサイズを基準とする「%」、画面サイズの幅や高さを基準とする「vw」「vh」、文字サイズを基準とする「em」「rem」などが指定可能です。

以下は「px」で指定した例を紹介します。
縦または横のみを指定した場合、アスペクト比は維持される事が確認できます。

<p>指定なし</p>
<img src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<p>widthを指定</p>
<img style="width:100px;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<p>heightを指定</p>
<img style="height:100px;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<p>widthとheightを指定</p>
<img style="width:200px;height:100px" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">

指定なし

widthを指定

heightを指定

widthとheightを指定

HTMLで親要素や画面の幅に合わせる

HTMLで画像のサイズの幅を親要素や画面の幅に合わせるには「100%」や「100vw」を指定します。

「px」指定と同様にアスペクト比は維持されますので「height」は指定する必要はありません。

<p>100%</p>
<img style="width:100%" src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" alt="画像の説明">
<p>100vw</p>
<img style="width:100vw" src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" alt="画像の説明">

100%

100vw