insdays

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

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

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

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

object-fit-images をダウンロード
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