CSSでサイズの違う画像を綺麗に並べるには？

/ CSS / By
ショコラ
ショコラ

CSSでサイズの違う画像を綺麗に並べるには？

object-fit: cover を使います。

もっさん先輩
もっさん先輩
img
{
　width: 300px;
  height: 300px;
  object-fit: cover;
}

横の長さ に 縦の長さ を合わせるには下のようにします。こちら結構使えると思います。

img
{
  width: 100%;
  aspect-ratio: 100/100;
  object-fit: cover;
}

ビフォー

アフター

<html>
<body>
<style>
img
{
  height: 300px;
  width: 300px;
  object-fit: cover;
}
</style>
<img src="https://answorz.com/wp-content/uploads/2022/06/animal_hamster-1.png">
<img src="https://answorz.com/wp-content/uploads/2022/06/mosss.png">
</body>
</html>

以上

Scroll to Top