insdays

IE・Edge の対応めんどくさい

object-fit を IE・Edgeにも対応させる

  • 2018.11.27
  • CSS
画像をビヨーンと上手いこと表示してくれる object-fit。
でも、そのまま書くだけでは IE・Edge には反映されない…。
いい加減にしてほしい

object-fit を IE・Edgeにも対応させる

ofi.js か ofi.min.js をダウンロード。

HTML

head 内に追加。
<script src="js/ofi.min.js"></script>
CDN もあった。
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
これも body 内に書く。
<script>
objectFitImages();
</script>

CSS

これで全ての画像に対応します。
.object-fit-img {
 object-fit: cover;
 font-family: 'object-fit: cover;'
}

特定の画像の場合

特定のクラスのみに反させる場合は下記のように
<script>
  objectFitImages('img.hoge');
</script>

object-fit 書き方

cover を一番良く使う。
object-fit: fill; 比率変えて全体
object-fit: contain; 縦横比を保持し、高さか幅に合わせる
object-fit: cover; 縦横比を保持し、全体に
object-fit: none; リサイズせず、そのまま
object-fit: scale-down; サイズが小さいほうを優先

object-position: 0 100%; ポジションも指示できる 



【いちを】背景画像をいっぱいに表示

背景画像の場合は background-size
background-size:cover; 縦横比を保持し、全体に
background-size:contain; 縦横比を保持し、高さか幅に合わせる
background-size:値指定 auto; 横だけ指定
background-size:auto 値指定; 縦だけ指定

Copyright 2018 insdays