【SCSS/CSS🔰】複数カラムで画像サイズが微妙にあってない場合の対応

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。

親要素で固定サイズにし、子要素をobject:fitで合わせる

div-img{
aspect-ratio: 4/3;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

overflow:hidden:はおまじない。
もし画像がはみ出したときにカバーできるように。

コメント