CSSだけで画像をトリミングする方法 #CSS

様々なサイズの画像を、全部同じサイズにトリミングしたい

main.css

.img {
    height: 200px;
    width: 800px;
}

=> 画像の比率がおかしくなり、変な感じに伸びてしまいます。

main.css

.img {
    height: 200px;
    width: 800px;
    /*これを追加するだけです*/
    object-fit: cover;
}

=> object-fitメソッドを追加するだけで、画像が同じサイズにトリミングされました。