Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

object-view-box

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

object-view-box は CSS のプロパティで、置換要素内の表示可能な領域 (viewbox) として矩形を定義し、置換要素のコンテンツを変倍したりパンしたりできるようにします。これは SVG の viewBox 属性と似た動作をします。

画像切り抜きズーム

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
object-view-box
実験的
104
104
104
none
実験的
104
104
104
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.thumbnail {
  object-view-box: inset(10% 20% 10% 20%);
}
.zoomed {
  object-view-box: inset(25% 25% 25% 25%);
}

ライブデモ

inset(10% 20%)

CSS Inset(10% 20%) demo.

プレビュー全画面表示

inset(25%)

CSS Inset(25%) demo.

プレビュー全画面表示

none (allbodydisplay)

CSS none (allbodydisplay) demo.

プレビュー全画面表示

実務での使いどころ

  • 画像の部分ズーム表示

    商品画像の特定部分をobject-view-boxで拡大表示し、ディテールを強調するレイアウトを実現します。

注意点

  • 2026年3月時点でChrome/Edgeのみの対応です。Safari・Firefoxでは利用できないため、フォールバックを用意してください。

アクセシビリティ

  • 画像の切り抜きによって重要な情報が失われないよう注意し、代替テキストで画像全体の内容を説明してください。

参考リンク