HTML / CSS

【CSS】アスペクト比を指定して画像を正方形で表示する【HTML】

widthが%のレスポンシブな画像を正方形で表示したい...
調べてみるとpadding-topを使った事例がたくさんあるので早速やってみる

...が、上に余白ができるだけで正方形にならない...
どうやらアスペクト比を指定できるスタイルが全ブラウザで使用可能になったらしいのでそれを使ってみた

早速実装

  • aspect-ratioを使う
<div class="img-list">
  <img src="~~~" class="img-list__item" />
  <img src="~~~" class="img-list__item" />
  <img src="~~~" class="img-list__item" />
</div>

<style>
.img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 500px;
}

.img-list__item {
  width: 32%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}
</style>

aspect-ratioはその名の通りアスペクト比を指定できるスタイルで、
aspect-ratio: {横} : {縦} で指定できる
そのためaspect-ratio: 1 : 1を指定すると正方形になってくれる

デモ

\ 案件のご依頼・ご相談はこちらから /