Photosynthesic blog

夫婦でやってるWeb屋です。

2017-01-24

【Twenty Seventeenのちょこっと解説】ヘッダーイメージのCSSがアツイ【object-fit】

こんにちは、mimiです。今日はTwenty Seventeenのちょこっと解説として、CSSについてのお話。

ヘッダーメディアのインパクトが強いWordpressのテーマ、Twenty Seventeen。CSS覗くまでbackground-size使ってるんでしょ、とタカをくくっていたのですが。
なんとobject-fitが使われてる!と知って居ても立ってもいられず記事にしています。解説ていうか報告ていうか。

ソースはこのへん。

<br />
@supports ( object-fit: cover ) {<br />
	.has-header-image .custom-header-media img,<br />
	.has-header-video .custom-header-media video,<br />
	.has-header-video .custom-header-media iframe,<br />
	.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {<br />
		height: 100%;<br />
		left: 0;<br />
		-o-object-fit: cover;<br />
		object-fit: cover;<br />
		top: 0;<br />
		-ms-transform: none;<br />
		-moz-transform: none;<br />
		-webkit-transform: none;<br />
		transform: none;<br />
		width: 100%;<br />
	}<br />
}<br />


object-fitは画像だけじゃなくて映像とかの内容物を良い感じにサイズ調整してくれる素敵プロパティですって言っても上手く伝わらないと思うので凄さは「【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する」とかでご確認ください。

凄く素敵なんですが、CSSにありがちなIEとEdgeが未対応という悲しいオシラセがありまして中々現場投下は難しめなひとなんです。それを使ってるのでアツイ!んだけど、なんでなんだろ?と思って探すと、これが採用されてる経緯もログが残っているのがまたWordpressの素晴らしさです。

#39035 (Twenty Seventeen: Header media (images and video) appear zoomed in) – WordPress Trac
https://core.trac.wordpress.org/ticket/39035

今のままだとzoomし過ぎて意図したサイズにならないよねー、ということでobject-fitを使っているらしい。ほほー。

@supportsを使ってobject-fitに対応しているブラウザだけに使ってて、それ以外は

<br />
.has-header-image .custom-header-media img,<br />
.has-header-video .custom-header-media video,<br />
.has-header-video .custom-header-media iframe {<br />
	position: fixed;<br />
	height: auto;<br />
	left: 50%;<br />
	max-width: 1000%;<br />
	min-height: 100%;<br />
	min-width: 100%;<br />
	min-width: 100vw; /* vw prevents 1px gap on left that 100% has */<br />
	width: auto;<br />
	top: 50%;<br />
	padding-bottom: 1px; /* Prevent header from extending beyond the footer */<br />
	-ms-transform: translateX(-50%) translateY(-50%);<br />
	-moz-transform: translateX(-50%) translateY(-50%);<br />
	-webkit-transform: translateX(-50%) translateY(-50%);<br />
	transform: translateX(-50%) translateY(-50%);<br />
}<br />

としているんですねー。transform使ってるんだなあ。それになんだmax-width:1000%て。初めて知ったぞそんなハック。

しかし、てことはIEやEdgeだとちょっとズームして見えてるということか。むむむ。相変わらず足を引っ張るIEちゃんめ・・・。

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter