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

列印頁面