imgに対してobject-fit: coverを付けることで、アス比が崩れることなく横幅いっぱいに画像を貼れる。
ただし、imgのサイズが確定していないといけないため、
img {
width: 100%;
height: 100vh;
object-fit: cover;
}
と書くことで、縦横のサイズを指定する必要がある。
vhはviewport heightの略で、現在のviewportの高さを100[％]として指定できる。
このままだと、画像の中心を基準にトリミングされてしまうので、例えば上部を基準にトリミングしたい場合は
img {
width: 100%;
height: 100vh;
object-fit: cover;
object-position: top;
}
と指定する。