CSS - object-position 属性

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

语法

object-position: top | right | bottom | left | center | length | percentage | initial | inherit;

属性值

值	描述
顶部右侧底部左侧中心	关键字用于设置图像的位置。可以组合使用这些值。
长度	元素的位置使用长度单位（例如 px、em、rem 等）分别从左边缘和顶部边缘设置。
百分比	元素的位置使用百分比值（例如 10%）相对于包含元素的大小设置，分别从左边缘和顶部边缘设置。
初始	它将属性设置为其默认值。
继承	它从父元素继承属性。

CSS 对象位置属性示例

以下示例说明了使用不同值的 object-position 属性。

使用关键字值的 Object Position 属性

可以使用关键字：顶部、右侧、底部、左侧和中心设置包含元素内替换元素（图像或视频）的位置。这些值可以组合使用。根据指定的价值，图像将分别从左边缘和顶部边缘放置在分配的空间内。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid black;
         height: 300px;
         width: 500px;
         object-fit: none;
      }

      .ex1 {
         object-position: left bottom;
      }

      .ex2 {
         object-position: right top;
      }
   </style>
</head>

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: left bottom
   </h4>
   <img src="/css/images/scenery4.jpg" 
   alt="img" class="ex1" />
   <h4>
      object-fit: right top
   </h4>
   <img src="/css/images/scenery4.jpg" 
   alt="img" class="ex2" />
</body>

</html>

使用长度值的 Object Position 属性

可以使用长度单位（例如 px、em、rem 等）设置包含元素内替换元素（图像或视频）的位置。元素分别从左边缘和顶部边缘放置在分配的空间内。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid black;
         height: 350px;
         width: 500px;
         object-fit: none;
      }

      .ex1 {
         object-position: 5px 20px;
      }

      .ex2 {
         object-position: 2em 1em;
      }
   </style>
</head>

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: 5px 20px ( 5px from 
      left edge and 20px from top edge)
   </h4>
   <img src="/css/images/scenery4.jpg" 
   alt="img" class="ex1" />
   <h4>
      object-fit: 2em 1em ( 2em from left 
      edge and 1em from top edge)
   </h4>
   <img src="/css/images/scenery4.jpg" 
   alt="img" class="ex2" />
</body>

</html>

使用百分比值的 Object Position 属性

可以使用百分比值（例如 10%）设置包含元素内替换元素（图像或视频）的位置。元素分别从左边缘和顶部边缘相对于包含元素的大小放置在分配的空间内。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid black;
         height: 350px;
         width: 500px;
         object-fit: none;
      }

      .ex1 {
         object-position: 20% 85%;
      }

      .ex2 {
         object-position: 85% 95%;
      }
   </style>
</head>

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: 20% 85% ( 20% from the left edge, 
      85% from the top edge realtive to the size of 
      the containing element)
   </h4>
   <img src="/css/images/scenery4.jpg" 
   alt="img" class="ex1" />
   <h4>
      object-fit: 85% 95% ( 85% from the left edge, 
      95% from the top edge realtive to the size of 
      the containing element)
   </h4>
   <img src="/css/images/scenery4.jpg" 
   alt="img" class="ex2" />
</body>

</html>

支持的浏览器

属性
object-position	32.0	79.0	36.0	10.0	19.0

css_properties_reference.htm

打印页面