CSSオブジェクト位置プロパティ
CSSobject-positionプロパティは、コンテナ内での<img>または<video>の配置方法を指定するために使用されます。
画像
400x300ピクセルのパリの次の画像を見てください。
次に、を使用object-fit: cover;してアスペクト比を維持し、指定された寸法を塗りつぶします。ただし、画像は次のように切り取られます。
例
img {
width: 200px;
height:
300px;
object-fit: cover;
}
object-positionプロパティの使用
表示されている画像の部分が、希望どおりに配置されていないとします。画像を配置するには、object-positionプロパティを使用します。
ここでは、object-positionプロパティを使用して、古い建物が中央になるように画像を配置します。
例
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
ここでは、object-positionプロパティを使用して、有名なエッフェル塔が中央になるように画像を配置します。
例
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
CSSオブジェクト-*プロパティ
次の表に、CSSオブジェクト-*プロパティを示します。
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |