img要素をdiv要素で囲う意味：横に文章がある画像をブラウザの幅に応じて伸縮させる方法

img要素をどうしてdiv要素で囲うのだろう？ごちゃごちゃするだけじゃない？と思ったことありますか？意味もなく慣習的に行っている場合もあれば、ブロックの単位を分かりやすくするため、という場合もあると思いますが、ここでは機能的な意味として、横に文章が並ぶimg要素をdiv要素で囲うことで、ブラウザの幅に応じて画像が伸縮するようになる、ということをご紹介します。

画像をブラウザの幅に応じて伸縮させるデモ

次の2つの画像は、ともにimgタグに対してmax-widthをPCでは500px、幅599px以下では300pxにしていますが、2つ目だけがブラウザの幅に応じていい感じに画像の伸縮をしてくれますので、PCでご確認ください。1つ目の画像はimg要素をdiv要素で囲っておらず、2つ目はdiv要素で囲っているという違いです。

コード

HTML

<div class="img-wrapper">
   <img class="demo-img" src="画像の場所" alt="伸縮しない画像">
   <p>この１つ目の画像は、ブラウザの幅を縮めても幅が縮まらず、画像の横に配置されているこの文字列の幅が縮まってしまいます。</p>
</div>
<div class="img-wrapper">
   <div class="demo-wrapper">
      <img class="demo-img" src="画像の場所" alt="伸縮する画像">
   </div>
   <p>この２つ目の画像は、ブラウザの幅を縮めると幅が縮まります。画像の横に配置されているこの文字列の幅も同時に縮まりますが、それぞれの幅の比率が変わりません。</p>
</div>

CSS

.demo-img{
   width: 100%;
}
.img-wrapper{
   display: flex;
   gap: 20px;
   margin-bottom: 20px;
}
.demo-img{
   max-width: 600px;
}
.img-wrapper>img,
.img-wrapper>p,
.img-wrapper>div{
   flex: 1;
}

解説

CSSについて、いずれのimg要素もwidth: 100％;となっています。flex: 1;のところは、画像と文字列の幅の比率を1:1にしようとしているものです。それが２つ目の画像は効いていて、１つ目の画像は効いていません。効かせてくれてもいいようには思うんですけどね・・。
なお、flex: 1;のflexプロパティについては詳しく次の記事で解説しています。

CSS GridとFlexboxの違いと使い分け（シミュレーター付）

div要素で囲わないと幅が縮まらない、というのはこのようにimg要素の横に何かを並べた時だけだと思います。HTMLの仕様としては、img要素をdiv要素で囲う必要性はありません。

まとめ

画像の横に文字列など配置したときに、img要素をdiv要素で囲うと画像をブラウザの幅に応じて伸縮させることができるようになります。