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>:根据相对于元素的任何百分比值设置位置。示例: object-position:50% 75%；

  • <length>:根据任何长度值设置位置。示例: object-position:2cm 4cm；

  • 边缘偏移值:由四个值组成。示例: 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="/css/images/orange-flower.jpg" alt="Object position single" />
   <img id="obj-pos-2" src="/css/images/orange-flower.jpg" alt="Object position percent" />
   <img id="obj-pos-3" src="/css/images/orange-flower.jpg" alt="Object position four" />
</body>
</html>