object-fit

こんにちは。WEB担当のまるたにです。
CSSで画像のサイズの問題で困ったことありませんか？

そういう時Photoshop等で開き画像をトリミングしなきゃいけない・・・

いえ、CSSで出来ます。

まずこの画像。
幅1000px、横500pxあります。

ここまでデカイとレスポンシブでわざわざ
縮小させなきゃいけませんよね。
あるプロパティ一つ使えばいいんですよ。

その名もobject-fit。
画像を任意の位置でトリミングするプロパティです。

まず、この画像を150pxまで小さくします。
写真ではなくベクター画像なのでここまで小さくしても劣化しません。

変化後を250pxで違いをわかりやすく見せますね。

object-fit: fill（初期値）

See the Pen
WNrdMbV by 丸谷真奈美 (@mxubsnhv)
on CodePen.

要素のコンテンツボックス全体を埋めるサイズになります。
オブジェクト全体が完全にボックスの中を埋めます。
オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、
オブジェクトは合うように引き伸ばされます。

object-fit: contain;

See the Pen
BajJYyb by 丸谷真奈美 (@mxubsnhv)
on CodePen.

置換コンテンツはアスペクト比を維持したまま
要素のコンテンツボックスに収まるように拡大縮小されます。
オブジェクト全体がボックス内に表示をし
アスペクト比が維持されるので、
オブジェクトのアスペクト比とボックスのアスペクト比が
合わない場合はレターボックス表示になります。

object-fit: cover;

See the Pen
eYJyVNz by 丸谷真奈美 (@mxubsnhv)
on CodePen.

置換コンテンツはアスペクト比を維持したまま
要素のコンテンツボックス全体を埋めるように拡大縮小されます。
オブジェクトのアスペクト比が
ボックスのアスペクト比と合わない場合は
オブジェクトの方が合うように切り取られます。

object-fit: none

See the Pen
PoZEQqX by 丸谷真奈美 (@mxubsnhv)
on CodePen.

置換コンテンツは、拡大縮小されません。

object-fit: scale-down

See the Pen
vYLpdNr by 丸谷真奈美 (@mxubsnhv)
on CodePen.

コンテンツはnone
又はcontainを指定したかのようにサイズが決められ、
オブジェクトの実際のサイズが小さいほうを採用します。

楽！

・・だけどこれ
IEだと表示出来ないデメリットがあります。
じゃあどうすんの、って？

Githubと、JavaScriptを使わなきゃいけません。

でもIEいつかなくなるから良いような気がしますけどね。今日はここまで(ﾟ∀ﾟ)！
それではまた。

Tweet