【CSS】object-view-boxとは？画像の拡大アニメーションで使えそう

2023年9月3日

URLをコピーしました！

要素を拡大縮小させたり、水平方向に移動させることができるobject-view-boxについて学びました。

object-view-boxで拡大アニメーション

画像をホバーした時に拡大するアニメーションで、object-view-boxが使えそうです↓

このプロパティのおかげで、画像を拡大させて親要素にoverflow:hidden;を指定する必要がなくなります。

このプロパティについて詳しく知りたい方は以下をご覧ください。

object-view-boxの基礎知識

何ができる？

仕様書から引用（原文をDeepL翻訳）↓

object-view-box プロパティは要素の上に “ビューボックス “を指定し、要素の内容のズームやパンニングを可能にする。これは SVG の属性に対応する。[SVG2] に対応する。
2.1. Setting The Viewbox: the object-view-box property

主に画像に対して使われていることが多かったです↓

指定できる値

以下の値を指定できます↓

none
rect()
xywh()
inset()

rect()とxywh()は、実験的機能でFirefoxのみ対応です。

そのためinset()のみ使えそうです。

inset()はモダンブラウザ全て対応済みです。

inset()について

基本的にobject-view-boxにinset()を指定して使用します。

引数には最大4つ値を指定できます。marginの一括指定と同じ感じです。

単位にはpxや%が使えます。%は、親要素ではなくその要素自身の幅や高さが基準になります。

例えば、画像の幅と高さが500pxでobject-view-box:inset(10%);と指定すると以下のように拡大されます↓

また最大値は、要素自身の幅または高さの値未満です。例えば、以下のような指定は無効です↓

object-view-box:inset(50%); // inset(50% 50% 50% 50%)と同じ指定

上記の場合、何も指定していないのと同じ状態になります。上下または左右合わせて100%未満にする必要があります。

以下のCodepenを実際に動かして確認してみてください（jheyさんのCodepenから引用）↓

See the Pen object-view-box Image Zoom [Chrome 104+] by Jhey (@jh3y) on CodePen.

また、inset()にはroundオプションがありますが、object-view-boxで試してみた感じ効きませんでした。

ブラウザの対応状況

以下のみ対応してます（Can I useより引用）↓

Chorme104〜
Edge104〜
Opera90〜

SafariとFirefoxは対応していません。実際に使うには、まだ早いかもです。