object-position プロパティ
object-position プロパティは、<img>、<video> などのメディアのエレメント内での表示位置を指定するプロパティです。
エレメント内のどこに表示するかを指定できます。
画像や動画の大きさより表示領域が大きい場合は、object-position プロパティの値がメディアの表示位置になります。
画像や動画より表示領域が小さい場合は、メディアは部分的に表示され、object-position プロパティの値で調整できます。
object-position プロパティは object-fitプロパティ と併用します。 object-fitプロパティの値はnoneまたはcoverになると思います。
img {
object-fit: none;
object-position: 30% 70%;
}
ページ内 Index
構文(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 length | CSS長さの単位 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | 50% 50% |
| 継承（Inherited） | Yes |
| CSS Animation | Yes |
Example
object-position の例です。Aは画像よりエレメントの大きさが大きい場合の例です。B.は画像よりエレメント表示領域が小さい例です。 object-fit プロパティでメディアの大きさを調整しないように指定します。