例えば200px × 200pxの枠内に画像を表示させたいとき、imgタグで表示させると画像全体が200px × 200pxに歪められて表示される。
見切れてもいいから縦横比を維持して表示させたい。
img{
object-fit: cover;
object-position: top;
}
上のように設定すると、画像の上部が縦横比を維持したまま表示され、下部分が見切れて表示されなくなる。
object-positionをbottom、left、rightなどに設定すると、表示する範囲を変えられる。