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

object-view-box

画像のインセット領域を指定して、その部分だけを表示・拡大するプロパティです。画像を加工することなくCSS側で切り抜きとズームを制御でき、サムネイルから詳細ビューへのトランジションやレスポンシブな画像の焦点調整に活用できます。HTMLの一要素だけで画像の部分表示が実現できます。

画像切り抜きズーム

概要

画像のインセット領域を指定して、その部分だけを表示・拡大するプロパティです。画像を加工することなくCSS側で切り抜きとズームを制御でき、サムネイルから詳細ビューへのトランジションやレスポンシブな画像の焦点調整に活用できます。HTMLの一要素だけで画像の部分表示が実現できます。

対応ブラウザ

デスクトップ

Chrome 104+
Edge 104+
Safari 未対応
Firefox 未対応

モバイル

Chrome Android 104+
Safari iOS 未対応
Firefox Android 未対応

基本構文

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

実務での使いどころ

  • 画像の部分ズーム表示

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

注意点

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

アクセシビリティ

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

参考リンク