わざわざabsoluteとか使ってた人たち、泣いてませんか?, object-fit: cover; 以外にも、全部で5種類のプロパティがあります。, 指定したwidthとheightを埋めるように画像をトリミングします。この際、画像は指定したwidthとheightのうち、大きい方に合わせ自動でリサイズされます。background-size: cover; と同じ。, 指定したwidthとheightの中にきっちり納まるように画像を配置します。トリミングはされません。background-size: contain; と同じ。, 指定したwidthとheightを埋めるように画像をトリミングします。画像はリサイズされません。, 使うのはcontainばっかりになりそうですが、他のも覚えておくといつか役に立つ日が来ると思います。, 何も設定しないと中央を基準にトリミングされますが、「object-position」を使えばトリミング位置を調整することも可能。, これを使うと、「WordPressで登録したサムネイルのトリミング位置を変更したい」という無茶振りにも割とスムーズに対応可能。, 最近はIE対応しないのがデフォルトの人も増えてきたようですが、残念ながらまだIE11対応しなきゃいけない場合のほうが圧倒的に多い。こんなに革命的に便利なのに、IEで使えないんじゃだめじゃん…, それが、「object-fit-images.js(通称ofi)」と呼ばれるjsスクリプトを使用する方法。, 以下のように記述して、ファイルを読み込み、処理を呼び出します。だいたいページのhead内か、