CSS｜わずか2行！画像の縦横比を揃えて表示する方法

object-fitとaspect-ratioを使えばわずか2行で実装できます。画像のトリミング作業が省けて楽ちんですね。

新しい方法

img {
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

古い方法

HTML

<div class="img-mask">
  <img src="XXX" alt="">
</div>

CSS

.img-mask {
  position: relative;
  background: #f3f3f3; /* 画像以外の背景色 */
  overflow: hidden;
}

.img-mask::before {
  content: "";
  display: block;
  /* 表示サイズ（お好みで） */
  padding-top: 66.6667%; /* 3:2 */
  padding-top: 75%; /* 4:3 */
  padding-top: 100%; /* 正方形 */
}

.img-mask img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 画像の表示設定（お好みで） */
  max-width: 100%; /* 横幅いっぱい */
  max-height: 100%; /* 縦幅いっぱい */
}

更新情報

2024.09.26 新しい方法を追加

新しい方法

古い方法

コメント欄