[CSS] object-fit: cover

2018年09月02日未分類

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

今日、 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) なのです。

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