こんばんはばさっちです。
今回は『object-fit』について書いていこうと思います。
結構前から『object-fit』のことは知っていたのですが、IEに対応していないとのことで関心を示していなかったのですが、調べてみたらJSを使えばIE11は対応可能なんですね…
簡単に説明するとCSSでトリミングができるプロパティなんですが、
▶たとえばこんな写真を縦横を250pxにしようとしたときにCSSでやろうとすると・・・
▶こんな感じにアスペクト比がめちゃくちゃになりますよね?
▶object-fitを使えばこんなにきれいにトリミングできます
。
使い方は簡単でCSSでimgの縦横にサイズを指定してobject-fit: cover;を追加するだけでOKです。
またIEに対応させようとした場合はobject-fit-imagesからファイルをダウンロードして使用したいページに読み込ませるだけでOKです。
あとはCSSにfont-family: ‘object-fit: cover;’を追加するだけでIEにも対応させることが可能です。
今までpositionでやっていたことが簡単に出来るようになりましたね!!
ネックはIE11以下…全てのサイトで使用するのはまだ先になりそうだな…
