CSS object-position 属性

定義と使用方法

object-position 属性と object-fit を一緒に使用すると、<img>や<video>が「自分の内容フレーム」内でどのように x/y 座標を使って配置されるかを指定できます。

参照：

CSS 教程：CSS object-fit

CSS リファレンスマニュアル：CSS object-position

HTML DOM リファレンスマニュアル：objectPosition 属性

例

画像のサイズを調整して内容フレームに適合させ、画像を内容フレーム内の左側から5px、上から10％に移動します：

img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px solid red;
}

実際に試してみてください

CSS 语法

object-position: position|initial|inherit;

属性値

値 説明
position

画像やビデオがその内容フレーム内の位置を指定します。

最初の値はx軸を、第二の値はy軸を制御します。

文字列（left、center、right）または数字（pxまたは％で指定）でできます。負の値も許可されます。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit この属性を親要素から継承します。参照してください： inherit。

技術的詳細

デフォルト値： 50% 50%
継承： はい
アニメーション制作： サポート。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 语法： object.style.objectPosition="0 10%"

ブラウザのサポート

このテーブルの数字には、この属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 10.0 19.0