備忘録的プログラミングリファレンス

object-positionプロパティ

 object-positionプロパティは、<img>、<video>などのメディアのエレメント内での表示位置を指定するプロパティです。 エレメント内のどこに表示するかを指定できます。
 画像や動画の大きさより表示領域が大きい場合は、object-positionプロパティの値がメディアの表示位置になります。
 画像や動画より表示領域が小さい場合は、メディアは部分的に表示され、object-positionプロパティの値で調整できます。

 object-positionプロパティはobject-fitプロパティと併用します。 object-fitプロパティの値はnoneまたはcoverになると思います。

<img>、<video>エレメントの配置を指定
img {
	object-fit: none;
	object-position: 30% 70%;
}

構文(Syntax)

CSS

object-position: [ length length ] | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.objectPosition;
値の設定
object.style.objectPosition="[ length length ] | initial | inherit";

値(Values)

Value摘要
50% 50%初期値(default値)
length lengthCSS長さの単位
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)50% 50%
継承(Inherited)Yes
CSS AnimationYes

Example

 object-positionの例です。Aは画像よりエレメントの大きさが大きい場合の例です。B.は画像よりエレメント表示領域が小さい例です。 object-fitプロパティでメディアの大きさを調整しないように指定します。