とか書いといてあれですが、
画像をCSSでBackgroundで指定する方式は単純なプロジェクトならばいいものの、画像はそもそもスタイル定義というよりコンテンツ定義で、HTML側で指定したほうが良いケースが多い、と指摘を受けました。
具体的には、CMSに組み込んだり、APIから値を流し込んだり、同じテンプレートで違う画像をはめ込む画面を量産するときにCSS側で画像パスが指定されているとやりにくい、と。
なので、違う手法を試すことに。
の3番の、「object-fit」を使う方式でやってみました。
ていうかめっっちゃ簡単。
画像にwidthとheightとobject-hit: coverを入れるだけ。
width: 600px;
height: 300px;
object-fit: cover;
を入れるだけ。
これだけでトリミングされ真ん中が表示されるようになります。便利だー。しかしIEはお察しらしい。
