“object-position”プロパティ:置換要素のコンテンツの配置

概要

“object-position”プロパティは置換要素のコンテンツのボックスの中での配置位置を指定するプロパティです。

置換要素のコンテンツが要素のコンテント・ボックスを完全に覆わない場合、余った空間には要素の背景色が表示されます。置換要素のコンテンツがコンテント・ボックスよりも大きくなる場合にはコンテント・ボックスからはみ出すことはなく、はみ出す部分は常に切り取られます。

サンプルコード

値

仕様書

定義されている仕様書

object-position

<position>

キーワード値で指定する

img {

object-fit: none;
object-position: top;
animation: 5s linear infinite SampleRotation;

}

img {

object-fit: none;
object-position: right;
border: 2px solid;

}

img {

object-fit: none;
object-position: bottom;
border: 2px solid;

}

img {

object-fit: none;
object-position: left;
border: 2px solid;

}

img {

object-fit: none;
object-position: center;
border: 2px solid;

}

img {

object-fit: none;
object-position: top left;
border: 2px solid;

}

img {

object-fit: none;
object-position: bottom right;
border: 2px solid;

}

“<length>”値で指定する

img {

object-fit: none;
object-position: 50px 50px;
border: 2px solid;

}

“<percentage>”値で指定する

img {

object-fit: none;
object-position: 25% 25%;
border: 2px solid;

}