IE11でもobject-fitを使う一番簡単な方法
CSSのobject-fitプロパティって便利ですよねぇ。 画像を並べるページではもうほとんどコレに頼り切りで、このプロパティがないなんて考えられないくらいです。 がしかし、この便利なobject-fitさん、IE11は対応してないんですよね…。 そもそもobject-fitって何？ 例えば、下記のような縦長写真と横長写真が混在する場合、普通に並べるとこんなふうにデコボコになりますよね。 幅200pxで揃えたら上下にデコボコになりますし、 高さ200pxで揃えると大きさが不揃いになりますし、 幅200px 高さ200pxを指定すると被写体が歪んでしまいます。 左のワンちゃんは潰れていますし、右のワンちゃんは細長くなっちゃいましたよね？ これを解決してくれるのが object-fit:cover; です。 こんなふうに指定した範囲内で画像をトリミングして表示してくれるんですね。 ■objec
IEでもobject-fitを使えるようにするスクリプト「fitie」 | TechMemo
fitieは、IEでもobject-fitを使えるようにするためのスクリプトです。いわゆるポリフィル(Polyfill)というやつですね。 object-fitは、画像や動画を簡単にトリミングすることができる便利なCSSプロパティですが、IEには対応していません。 fitieを導入することで、他のブラウザと同じようにIE8～11でもobject-fitが使えるようになります。 fitieの使い方 GitHubからfitieをダウンロードします。distフォルダ内にあるfitie.jsをサーバーにアップして、スクリプトを読み込みます。 <script src="fitie.js"></script> あとは、通常通りCSSでobject-fitを指定してあげるだけです。 img.cover, video.cover { object-fit: cover; } あとがき スクリプトを読み込ん
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
