HTML&CSS

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

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

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

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

伸縮しない画像

この1つ目の画像は、ブラウザの幅を縮めても幅が縮まらず、画像の横に配置されているこの文字列の幅が縮まってしまいます。

伸縮する画像

この2つ目の画像は、ブラウザの幅を縮めると幅が縮まります。画像の横に配置されているこの文字列の幅も同時に縮まりますが、それぞれの幅の比率が変わりません。

コード

HTML

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

CSS

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

解説

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

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

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

まとめ

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

著者のイメージ画像

BringFlower
稲田 高洋(Takahiro Inada)

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。
2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。
プロフィール詳細