このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
object-view-box
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
object-view-box はCSS のプロパティで、置換要素内の表示可能な領域 (viewbox) として矩形を定義し、置換要素のコンテンツを変倍したりパンしたりできるようにします。これは SVG のviewBox 属性と似た動作をします。
試してみましょう
object-view-box: inset(0 0);object-view-box: inset(20%);object-view-box: xywh(95px 20px 60px 60px);object-view-box: rect(110px 120px 200px 45px);object-view-box: none;<section> <img src="/shared-assets/images/examples/plumeria-146x200.jpg" alt="枝に咲く赤い花とつぼみのクローズアップ。" /></section>#example-element { height: 100%; width: 100%; border: 2px dotted #888888;}@supports not (object-view-box: none) { body::before { content: "このブラウザーは 'object-view-box' プロパティに対応していません。"; color: black; background-color: #ffcd33; display: block; width: 100%; text-align: center; }}構文
/* キーワード */object-view-box: none;/* <basic-shape-rect> 関数 */object-view-box: inset(20%);object-view-box: inset(20% 30%);object-view-box: inset(10px 0 25px 33px);object-view-box: xywh(95px 20px 60px 60px);object-view-box: rect(10px 30px 30px 10px);/* グローバル値 */object-view-box: inherit;object-view-box: initial;object-view-box: revert;object-view-box: revert-layer;object-view-box: unset;値
noneこの要素にはビューボックスがありません。これがデフォルトです。
<basic-shape-rect>inset()、xywh()、rect()のいずれかの関数で、要素を（置換要素の）自然な寸法でビューボックスを指定します。それ以外の場合はnoneに解決します。
解説
object-view-box プロパティは、画像や動画を含む置換要素の切り抜きやサイズ変更に使用できます。これは、置換要素用に確保された有効領域内で、その要素のコンテンツの一部を表示させることで機能します。表示される置換要素の領域は、このプロパティの値によって定義されます。利用できる予約領域は、要素のデフォルトの外在サイズによって決定されます。表示されるコンテンツの一部は、コンテンツの内在的なアスペクト比を維持しながら、ズームイン、パンアウト、元のサイズなどで表示できます。
このプロパティの値は<basic-shape-rect> であり、<basic-shape> 関数のうち矩形の図形を定義するものに限られたものです。例えば、この値はxywh() 関数で指定することができます。
img { object-view-box: xywh(410px 0 400px 150px);}この場合、画像の表示される部分の左上隅は、左端から410px、上端から0 であり、これは引数の x と y で定義されている通りです。元画像の表示される部分のサイズは幅410px、高さ150px であり、この関数のw とh の成分です。この画像の 400x150 ピクセルの領域は、ページレイアウト時には画像自体 のために確保された空間に表示されます。表示されるコンテンツ領域が元の内在サイズのままか、拡大表示されるか、縮小表示されるかは、ビューボックスが画像要素のサイズより 400px x 150px であるか、小さいか、大きいかに応じてそれぞれ決まります。
この場合、object-view-box プロパティで定義する矩形ビューボックスと<img> 要素の矩形領域が同じサイズ（400 × 150 ピクセル）であるため、置換要素は変倍されません。
w とh の値を小さくして、拡大表示効果を生み出します。画像の一部が縮小されるため、拡大表示された状態になります。
w およびh 引数の値を大きくすると、ズームアウト効果を生成します。画像のより大きな節が縮小されるため、ズームアウト効果を保持します。
x 座標とy 座標をアニメーションさせることで、要素自体は元の位置に留まったまま、要素のビューボックスを移動させることでパン効果を作成します。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | 置換要素 |
| 継承 | なし |
| 計算値 | specified keyword, or computed function |
| アニメーションの種類 | as if possible, otherwise discrete |
形式文法
object-view-box =
none|
<basic-shape-rect>
<basic-shape-rect> =
<inset()>|
<rect()>|
<xywh()>
<inset()> =
inset(<length-percentage>{1,4}[round<'border-radius'>]?)
<rect()> =
rect(<top> ,<right> ,<bottom> ,<left>)
<xywh()> =
xywh(<length-percentage>{2}<length-percentage [0,∞]>{2}[round<'border-radius'>]?)
<length-percentage> =
<length>|
<percentage>
<border-radius> =
<length-percentage [0,∞]>{1,4}[ /<length-percentage [0,∞]>{1,4}]?
例
基本的な使い方
この例は、object-view-box プロパティの基本的な使い方と効果を示しています。3 つの異なる<basic-shape-rect> 関数を使用して示されています。
HTML
3 つのほぼ同じ<img> 要素が<figure> 要素に囲まれています。違いはクラス名だけです。
<figure> <img src="https://mdn.github.io/shared-assets/images/examples/painted-hand.jpg" alt="色を塗った手の部分の元の倍率" /> <figcaption>intrinsic</figcaption></figure><figure> <img src="https://mdn.github.io/shared-assets/images/examples/painted-hand.jpg" alt="色を塗った手の部分のズームインしたもの" /> <figcaption>zoomed in</figcaption></figure><figure> <img src="https://mdn.github.io/shared-assets/images/examples/painted-hand.jpg" alt="色を塗った手の部分のズームアウトしたもの" /> <figcaption>zoomed out</figcaption></figure>CSS
すべての画像の幅と高さを同じにスタイル設定した後、それぞれのクラス（つまりそれぞれの画像）に異なるobject-view-box 値を設定します。描画された手の画像の内在サイズは298px×332px です。height とwidth を設定し、外在的なサイズを200px ×200px に設定します。
img { width: 200px; height: 200px; border: 1px solid red;}3 つの異なるシェイプ関数を使用して、object-view-box プロパティに 3 つの異なる値を設定しています。intrinsic 要素のxywh() 関数の値は、画像コンテンツの左から70px、上から90px の位置から始まる200px 角の正方形領域を表示します。zoom-in の要素のrect() 関数は、元の要素の上端から110px～270px、左端から90px～250px の範囲の160px 角の正方形領域を表示します。zoom-out の置換要素のinset() 関数は、元の要素の298px 角の正方形領域を表示します。これは画像の全幅を表示しつつ、上下を 17px ずつ切り取るものです。
.intrinsic { object-view-box: xywh(70px 90px 200px 200px);}.zoom-in { object-view-box: rect(110px 250px 270px 90px);}.zoom-out { object-view-box: inset(17px 0 17px 0);}@supports not (object-view-box: none) { body::before { content: "このブラウザーは 'object-view-box' プロパティに対応していません。"; color: black; background-color: #ffcd33; display: block; width: 100%; text-align: center; }}figure { display: inline-block; margin: 0;}figcaption { text-align: center;}結果
intrinsic バージョンは、画像の変倍されていない領域を表示させています。zoom-in バージョンは、画像のより小さな節（160px 四方）を表示させ、200px 四方のビューボックスに収まるよう変倍しています。節が引き伸ばされるため、ズームインしたように見ていきます。zoom-out バージョンは、画像のより大きな領域（298px 四方の領域）を表示させ、200px 四方のビューボックスに収まるよう変倍しています。領域が縮小されるため、ズームアウトしたように見ていきます。
object-view-box プロパティを使用したライブズームイン
この例では、静的なサイズの HTML 要素内で置換要素の一部を拡大・縮小表示するためにobject-view-box プロパティを使用する方法を示しています。この場合、非常に大きな画像内のヒョウの目が、ズーム効果の焦点として機能します。
HTML
<img> 要素とrange 型の<input> 要素、それに関連付けられた<label> を設置しました。元のヒョウの画像の自然な寸法、または内在サイズは幅1244px、高さ416px であり、アスペクト比は3:1 です。
<img src="https://mdn.github.io/shared-assets/images/examples/leopard.jpg" alt="leopard" /><p> <label for="box-size">Zoom-in: </label> <input type="range" min="115" max="380" value="150" /></p><output></output>CSS
--box-size カスタムプロパティを定義し、これをxywh() 関数における高さおよび幅として使用することで、アスペクト比1:1 の正方形のビューボックスを生成します。ビューボックスのオフセット点（ズーム効果における焦点）は、x 座標に500px、y 座標に30px を設定し、これはヒョウの右目の左上角に対応します。
input { width: 350px;}output { text-align: center; background-color: #dedede; font-family: monospace; padding: 5px; display: block;}@supports not (object-view-box: none) { body::before { content: "このブラウザーは 'object-view-box' プロパティに対応していません。"; color: black; background-color: #ffcd33; display: block; width: 100%; text-align: center; }}img { width: 350px; height: 350px; border: 2px solid red; --box-size: 150px; object-view-box: xywh(500px 30px var(--box-size) var(--box-size));}JavaScript
スライダーにイベントリスナーを追加し、ユーザーが操作した際にカスタムプロパティ--box-size の値を更新します。スライダーが右に移動される際のズームイン効果を高めるため、ビューボックスサイズを縮小するとズームイン効果が強まる特性を利用し、スライダーの値を500px から差し引くことで反転させます。
const img = document.querySelector("img");const zoom = document.getElementById("box-size");const output = document.querySelector("output");function update() { const size = 500 - zoom.value; img.style.setProperty("--box-size", `${size}px`); output.innerText = `object-view-box: xywh(500px 30px ${size}px ${size}px);`;}zoom.addEventListener("input", update);update();結果
スライダーを右に移動するとズームイン効果が強まり、左に移動されると縮小する。スライダーはビューボックスのサイズのみに影響し、ビューボックスの原点となる x 値と y 値は変化しません。<img> 要素のサイズも変わりません。
オブジェクトのビューボックスプロパティを使用したパン操作
この例は、object-view-box プロパティの値をアニメーション化することで画像をパンする方法を示しています。
HTML
この HTML には単一の画像があります。
<img src="https://mdn.github.io/shared-assets/images/examples/leopard.jpg" alt="leopard" />CSS
画像サイズを定義し、ビューボックスのサイズ（xywh() 関数のw およびh 要素）を一定に保ちながら、5 秒間にわたってx およびy 引数の上部と左上の位置を変更し、アニメーションさせます。
img { width: 350px; height: 350px; object-view-box: xywh(0 30px 400px 400px); animation: panning 5s linear infinite alternate;}@keyframes panning { from { object-view-box: xywh(0 -50px 400px 400px); } to { object-view-box: xywh(800px 68px 400px 400px); }}@supports not (object-view-box: none) { body::before { content: "このブラウザーは 'object-view-box' プロパティに対応していません。"; color: black; background-color: #ffcd33; display: block; width: 100%; text-align: center; }}結果
仕様書
| Specification |
|---|
| CSS Images Module Level 5 # propdef-object-view-box |