目次
ここのURLをクリップボードにコピー(copied!)
coverを用いたトリミングは、横長画像では「左右が切り取り」され、縦長画像では「上下が切り取り」されることになります。
メディアサイトなどのサムネイル画像に用いられるCSSの手法をイラスト付きで解説します。
縦横のバラバラのサイズの画像でも、このCSSを用いることで自動でトリミングし、特定のサイズにおさめることが可能になります。
coverの自動トリミングをイラストで説明します
横長画像の場合
横長画像では、場合によっては「画像内左右が切り取られる」ことになります。
縦長画像の場合
縦長画像では、場合によっては「画像内上下が切り取られる」ことになります。
ブラウザの対応状況・注意点
ご紹介したobject-fitは「IE11（Internet Explorer）」ではサポートしていないので念のため注意です。
また、画像タグ(img)以外でも使えますが、Microsoft Edgeにおいては<img>以外への使用はサポートしていないようですので、注意してください。
