【CSS】レスポンシブに対応したimg要素の配置方法4選

はじめに

CSSでスタイリングをしていて、画像が意図したサイズに配置されず困った経験はありませんか？

ここではimg要素などをレスポンシブに設定する方法について4種類紹介します。

前提として、この記事ではpタグで囲まれた画像をレスポンシブに対応させるようにスタイリングしていきます。

<div class="responsive-sample">
		<p class="sample-img">
				<img src="./sample.jpg" alt="sample" />
		</p>
</div>

画像単体で表示することももちろん可能ですが、スタイリング調整の容易性やセマンティックなどの観点から何らかのタグで囲むことを想定しています。

img要素に指定するプロパティ

width: 100%; height: auto;

簡単に設置ができる方法です。

img要素にwidth: 100%;を設定します。

このプロパティを設定することで、親要素の横幅いっぱいに画像を表示することができます。

しかし、画像自体の縦横比に依存するため、縦横比を自分で設定したい場合や縦横比の違う画像を並べたいときなどは使いづらいですね。

これを回避するために親要素にheightを設定したうえでoverflow: hidden;を設定する方法があります。

このときは親要素の縦横比が合わないときには余白ができたり、見切れたりします。

width: 100%;
height: auto;

以上の特徴からバラバラなサイズのデータ（例えばブログなどでユーザーが投稿した画像を一覧表示する場合など）の設定などには向きません。

ロゴの表示など、表示する画像が決まっている場合には使いやすいと思います。

object-fit: cover;

親要素側で縦横比を設定したいときに有効です。

親要素に合わせて縦横のはみ出しを自動でトリミングしてくれるので、ブログ画像の表示やサイズの違う画像を並べるときに便利なプロパティです。

.sample-img {
    width: 100%;
    height: 150px;
}

.sample-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

object-fit: cover;

object-fitを使うときには、width、heightをautoにすると親要素のサイズに追随しなくなってしまうので、明確にサイズ指定をしましょう。

IEには非対応ですが、IEのサポートが切れるので今後考慮の必要はなくなると思います。

object-fitのその他のプロパティは別記事にまとめました。用途に合わせて使い分けましょう。

2021年10月20日【CSS】object-fitの使い方について

どうしても対応させたいときにはjqueryのプラグイン「object-fit-images」などを使用しましょう。

親要素に指定するプロパティ

aspect-ratio

親要素の縦横比を固定して、レスポンシブに対応させることができます。

.sample-img {
    width: 100%;
    aspect-ratio: 2 / 1;
}

.sample-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

aspect-ratio: 2 / 1;

サンプルではアスペクト比を２：１にしています。これを３：２や１：１にするには、

aspect-ratio: 3 / 2; /* アスペクト比3:2 */
aspect-ratio: 1; /* アスペクト比1:1 同比率のときは"/"を省略できます */

IE非対応のためにあまり使用されていませんでしたが、その他のブラウザの最新バージョンには対応しているので、今後多用されることになると思われます。

padding-top

aspect-ratioが出るまでは主流の方法だったのではないでしょうか。

もちろんこれからも使える方法です。

「縦方向のpaddingを％で指定すると親要素の横幅を参照する」ことを利用した方法です。

.sample-img {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: calc(100% * (1 / 2));/* 2:1の場合 */
    overflow: hidden;
}
.sample-img > img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);/*上下中心に設定するための記述です。*/
    width: 100%;
    height: auto;
}

padding-top: 50%;

heightを0にしているのでそのままだとimg要素がうまく表示されません。このためimg要素をposition: absolute;に設定する必要があります。

この方法を利用してiframe要素のgoogleマップや動画などの縦横比をレスポンシブに対応させる方法などもよく使われます。

ちなみにアスペクト比から比率を求めるには、単純に割り算をすれば出てきます。

padding-top: calc(100% * (3 / 4)); /* 4:3の場合 75%になります*/
padding-top: 75%; /* もちろん直接入力してもOK! */

まとめ

以上、レスポンシブに対応したimg要素の設置方法について一例を挙げました。

それぞれの方法には用途に合わせて細かいセッティングがありますが、別の記事で深堀りしたいと思います。

ではまた。

関連記事

2021年10月20日【CSS】object-fitの使い方について