Seventeenのちょこっと解説】ヘッダーイメージのCSSがアツイ【object-fit】2017-01-24この記事は3年以上前のものです。こんにちは、mimiです。Seventeenのちょこっと解説として、CSSについてのお話。CSS覗くまでbackground-size使ってるんでしょ、とタカをくくっていたのですが。なんとobject-fitが使われてる!と知って居ても立ってもいられず記事にしています。解説ていうか報告ていうか。}}object-fitは画像だけじゃなくて映像とかの内容物を良い感じにサイズ調整してくれる素敵プロパティですって言っても上手く伝わらないと思うので凄さは「【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する」とかでご確認ください。凄く素敵なんですが、CSSにありがちなIEとEdgeが未対応という悲しいオシラセがありまして中々現場投下は難しめなひとなんです。それを使ってるのでアツイ!んだけど、なんでなんだろ?と思って探すと、これが採用されてる経緯もログが残っているのがまたWordPressの素晴らしさです。Trachttps://core.trac.wordpress.org/ticket/39035今のままだとzoomし過ぎて意図したサイズにならないよねー、ということでobject-fitを使っているらしい。translateY(-50%);}としているんですねー。transform使ってるんだなあ。それになんだmax-width:1000%て。知ったぞそんなハック。ことはIEやEdgeだとちょっとズームして見えてるということか。相変わらず足を引っ張るIEちゃんめ・・・。この記事を書いた人mimi主に書いている人。