[CSS] object-fit: cover

こんにちは。あみだくじです。

今日、 https://shareable.house/2018/09/02/315/ を更新すると、以下のような惨状になってしまいました。

 

アイキャッチ画像の高さが揃っていない…

とりあえず、画像のサイズをいい感じに揃えるのは面倒なので、object-fit で楽してしまいます。

修正前は


img {
  width: 100%;
  height: auto;
}

だけでしたが、


img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

こうすると、画像がいい感じに中央揃えになります!


 

ただ、object-fit は IE 未対応、Edge は img タグのみ対応 (今回は img タグなので OK) なのです。

https://caniuse.com/#search=object-fit

まあ表示が若干崩れるくらいなので、IE 対応は面倒だし OK ということにしたいと思います。

 

参考: https://www.webcreatorbox.com/tech/object-fit

この記事を書いた人

あみだくじ