青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

Webで画像のトリミング、backgroundを使わずに、今度はobject-fit。

tech.motoki-watanabe.net

とか書いといてあれですが、

画像をCSSでBackgroundで指定する方式は単純なプロジェクトならばいいものの、画像はそもそもスタイル定義というよりコンテンツ定義で、HTML側で指定したほうが良いケースが多い、と指摘を受けました。

具体的には、CMSに組み込んだり、APIから値を流し込んだり、同じテンプレートで違う画像をはめ込む画面を量産するときにCSS側で画像パスが指定されているとやりにくい、と。

なので、違う手法を試すことに。

style01.net

の3番の、「object-fit」を使う方式でやってみました。

ていうかめっっちゃ簡単。

画像にwidthとheightとobject-hit: coverを入れるだけ。

width: 600px;
height: 300px;
object-fit: cover;

を入れるだけ。

これだけでトリミングされ真ん中が表示されるようになります。便利だー。しかしIEはお察しらしい。