coverの説明（CSSのobject-fitで画像を自動でトリミング）

ここのURLをクリップボードにコピー(copied!)

coverを用いたトリミングは、横長画像では「左右が切り取り」され、縦長画像では「上下が切り取り」されることになります。

メディアサイトなどのサムネイル画像に用いられるCSSの手法をイラスト付きで解説します。
縦横のバラバラのサイズの画像でも、このCSSを用いることで自動でトリミングし、特定のサイズにおさめることが可能になります。

coverの自動トリミングをイラストで説明します

横長画像の場合

横長画像では、場合によっては「画像内左右が切り取られる」ことになります。

縦長画像の場合

縦長画像では、場合によっては「画像内上下が切り取られる」ことになります。

ブラウザの対応状況・注意点

ご紹介したobject-fitは「IE11（Internet Explorer）」ではサポートしていないので念のため注意です。
また、画像タグ(img)以外でも使えますが、Microsoft Edgeにおいては<img>以外への使用はサポートしていないようですので、注意してください。