CSS - object-position 属性_CSS 菜鸟教程

描述

CSS 中的 object-position 属性用于指定内容在具有定义大小的元素中的位置。它通常与图像或视频一起使用，允许您控制对象的焦点应在其容器中出现的位置。

可能的值

可以采用一到四个值，用于指定元素的 2D 位置

关键字值：

top：示例 − object-position： top;
bottom：示例 − object-position： bottom;
left：示例 − object-position： left;
right：示例 − object-position： right;
center：示例 − object-position： center;

<percentage>值：根据相对于元素的任何百分比值设置位置。示例 − 对象位置： 50% 75%;

<length>值：根据任何长度值设置位置。示例 − 物体位置：2cm 4cm;

edge offsets 值：由四个值组成。示例 − object-position： top 20px right 10px;

适用于

替换的元素，例如图像、视频等。

DOM 语法


object.style.objectPosition = "<position> | 50% 50%";

例

下面是一个示例：


<html>
<head>
<style>
	 	img {
	 	 	 width: 300px;
	 	 	 height: 250px;
	 	 	 border: 1px solid black;
	 	 	 background-color: silver;
	 	 	 margin-right: 1em;
	 	 	 object-fit: none;
	 	}

	 	#obj-pos-1 {
	 	 	 object-position: 20px;
	 	}

	 	#obj-pos-2 {
	 	 	 object-position: 50% 10%;
	 	}

	 	#obj-pos-3 {
	 	 	 object-position: right 2em left 20px ;
	 	}
</style>
</head>
<body>
	 	<img id="obj-pos-1" src="images/orange-flower.jpg" alt="Object position single" />
	 	<img id="obj-pos-2" src="images/orange-flower.jpg" alt="Object position percent" />
	 	<img id="obj-pos-3" src="images/orange-flower.jpg" alt="Object position four" />
</body>
</html>

<< CSS - object-fit 属性 CSS - offset-anchor 属性 >>