CSS3 で縦長・横長をうまくトリミングする

(A)

通常のトリミング指定だとこのようになる。

img {
  width: 480px;
  height: 200px;
  object-fit: cover;
}

(B)

画像の縦横比率がバラバラの場合、比率が異なることに起因して、中央にズームされすぎる場合がある。
そういう時はmin/max指定で幅を設けると、どちらかに合わさった上でトリミングされる。

img {
  min-width: 200px;
  max-width: 480px;
  height: 200px;
  object-fit: cover;
}

(C)

例えば、200x338の縦長の画像は、 （A）の指定だと上下が見切れすぎてしまい、何が写っているが分からない。そこで高さを指定しつつも横幅はmax-width指定にすると、横幅が広がらない。高さにフィットするので全体が見えるようになる。

img {
  max-width: 480px;
  height: 200px;
  object-fit: cover;
}

ただ、max-width指定だけだと横幅が小さくなりすぎる。200x338の縦長の画像を height 200 まで縮めると、 width 118 になる。 （縦横比率を保ったまま、縦の長さに合わさってしまうため、横幅が小さくなる。）

本来 width 480 指定したい所に横幅 118 が混ざるのは避けたいと考えた時には、(B)のように、 min-width も同時に指定する。
min-width200 にまで縮んだ上で、はみ出た縦サイズ部分が object-fit: cover によって見切れる。