CSS使用・レスポンシブで要素を常に正方形に保つ方法！

どうもお世話になっております。
本日はレスポンシブデザインなのに常に画像などの要素を正方形に保つためのCSSコードをご紹介します。
これを使用すればブラウザを可変したときでも常に正方形をキープできます。

コード紹介

さっそく答えです。

CSSコードはこちら

.sample{
  aspect-ratio: 1 / 1;  /* 正方形にする */
  object-fit: cover;
}

.sample{
  aspect-ratio: 1 / 1;  /* 正方形にする */
  object-fit: cover;
}

コード解説

例えば画像をflexやグリッドで3カラムなどに並べたとき、画像の横幅はブラウザに合わせて可変しますよね。
でもそのままだと「高さ」が一定ではないため、画像サイズがバラついてしまいます。

そこで役立つのが上記にある通り、 CSS の aspect-ratio プロパティ です。

gridで書いたときの例

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grid img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* 正方形に固定 */
  object-fit: cover;      /* はみ出した部分トリミング */
  display: block;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grid img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* 正方形に固定 */
  object-fit: cover;      /* はみ出した部分トリミング */
  display: block;
}

画像の横幅は 親要素（＝グリッドのセル）に合わせて100％ にします。
これでレスポンシブ対応ができます。

aspect-ratio: 1 / 1; ← ここが重要

aspect-ratio は “縦横比を指定するプロパティ” です。

例えば・・・

• 1 / 1 → 正方形
• 16 / 9 → 横長動画サイズ
• 4 / 5 → Instagramなどのやや縦長

比率を指定してあげることで自動で調整されるということになります。

aspect-ratioは2025年時点で主要ブラウザはほぼ対応済み

CSS対応の情報を調べられるサイト「https://caniuse.com/」にて。
aspect-ratioは2025年時点で主要ブラウザはほぼ対応済みなので、安心して使用できます。