CSSオブジェクト位置プロパティ

コンテンツボックスに合わせて画像のサイズを変更し、コンテンツボックス内で画像を左から5ピクセル、上から10％の位置に配置します。

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

定義と使用法

このobject-positionプロパティは、object-fitと一緒に使用して、<img>または<video>を「独自のコンテンツボックス」内にx / y座標で配置する方法を指定します。

デフォルト値：	50％50％
遺伝性の：	はい
アニメート可能：	はい。アニメート可能について読む
バージョン：	CSS3
JavaScript構文：	object .style.objectPosition = "0 10％"

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
object-position	31.0	16.0	36.0	10.0	19.0

object-position: position|initial|inherit;

Value	Description
position	Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit