object-position 属性与 object-fit 属性一起使用，以指定元素应如何在其内容框中使用 x/y 坐标定位。
第一个值控制 x 轴，第二个值控制 y 轴。
此属性可以由字符串（左、中或者右）或者数字（以 px 或者 % 为单位）指定。
负值有效。
| 初始值 | 50％ 50％ |
|---|---|
| 应用于 | 更换元素。 |
| 继承 | 可继承 |
| 可动画的 | 是的。图像是可动的。 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.ObjectPosition =“20％ 0％”; |
CSS object-position 属性值说明
| 值 | 描述 |
|---|---|
| position | 指定内容框中的元素的位置。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
object-fit: position | initial | inherit;
对象位置属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: none;
object-position: 50% 50%;
}
</style>
</head>
<body>
<h2>Object-position 属性示例</h2>
<h3>Oroirnal image:</h3>
<img src="/bg.jpg" alt="Tree" width="300" height="200">
<h3>Object-position: 50% 50%</h3>
<img class="tree" src="/bg.jpg" alt="Tree" width="300" height="200">
</body>
</html>
指定为“left”的对象位置属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: none;
object-position: left;
}
</style>
</head>
<body>
<h2>Object-position 属性示例</h2>
<h3>Oroirnal image:</h3>
<img src="/bg.jpg" alt="Tree" width="300" height="200">
<h3>Object-position: left</h3>
<img class="tree" src="/bg.jpg" alt="Tree" width="300" height="200">
</body>
</html>
在“px”和“%”中指定的对象位置属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: none;
object-position: 10px 20%;
}
</style>
</head>
<body>
<h2>Object-position 属性示例</h2>
<h3>Oroirnal image:</h3>
<img src="/bg.jpg" alt="Tree" width="300" height="200">
<h3>Object-position: left</h3>
<img class="tree" src="/bg.jpg" alt="Tree" width="300" height="200">
</body>
</html>
日期：2020-06-02 22:14:40 来源：oir作者：oir