【CSS】画像のアスペクト比を保つ

Topページ内への表示やプロフィール画像のように大きさを指定したいとき、size: "300x300"等を使用して合わせた際に、横長・縦長の画像が潰れてしまいます。その際に画像の縦横の比率を維持してしたい場合の記述方法をメモしておきます。

やりたいこと

Topページに表示される画像のアスペクト比を揃えたい。
現状は下記のように、size: "300x300"で指定しているため画像が潰れています。
(冨澤選手が若干細くなってます…)

これを画像をつぶさず表示したい。

object-fitを使用

今回はobject-fitを使います。これは要素に適用する背景画像や動画の表示方法を指定するためのCSSプロパティです。

.クラス名{
	height: 300px;
	object-fit: cover;
}

上記のように指定し、プロパティの値として、coverを指定すると、要素に背景画像や動画をフィットさせるという意味になります。
このプロパティを使用すると、画像を切り取ることなく要素内に完全に表示することができます。
height: 300px;は、要素の高さを300ピクセルに設定します。
上記の記述は、高さを300ピクセルに設定し、同時に背景画像や動画を要素内にフィットさせる効果を実現します。

これで画像が潰れることは無くなりました。

その他の方法

他にもアスペクト比をそろえるのにいくつかあったのでメモしておきます。

1. width: 100%; height: auto;
   このCSSを使用すると、画像の横幅を親要素に合わせて100%に設定し、縦幅は自動的に算出されるため、アスペクト比が保たれます。
2. padding-bottom: 50%; width: 100%; height: 0;
   このCSSを使用すると、要素に対してパディングの下部を50%に設定し、縦幅を0にします。これにより、要素自体の高さがゼロになりますが、背景画像がパディングの割合で表示されてアスペクト比が保たれます。
3. position: relative; width: 100%;
   このCSSを使用すると、要素を相対位置指定にし、横幅を親要素に合わせて100%に設定します。その後、要素内の画像に対して「position: absolute; top: 0; left: 0; width: 100%; height: 100%;」を指定することで、画像を要素内に絶対配置し、アスペクト比を保持します。

今回出たやり方は一部であり、他にもさまざまな方法があります。使用するには要素の構造と目的に応じて最適なCSSを選択していけるようにいろいろと試してみたいと思います。