cssで画像を正方形にする方法（レスポンシブ対応）

2022年2月23日2024年6月30日

前までは画面幅ごとにheight指定し直してたけど、いろいろ調べたらもっと簡単にできることが分かったので、メモ

<div class="wp-block-jin-gb-block-box simple-box4">
  <p>
    <div class="el_square"></div><img src="./img/test.jpg"></div>
  </p>
</div>

.el_square {
  position: relative;
}

.el_square::before {
  content: ”;
  display: block;
  padding-top: 100%;  /*ここを75%にすると4:3の長方形になる*/
}

.el_square img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  object-fit: cover;
}

よかったらシェアしてね！