Documents

CSSで画像の縦横比をあわせてトリミングする


object-fit: coverなるプロパティーがあるのでした。

img {
  width: 250px;
  height: 250px;
  object-fit: cover;
}

画像の真ん中を正方形に切り抜いてくれます。
丸く切り抜きたかったら、こう。

img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
}


2022.05.08