CSS - object-fit 屬性

CSS object-fit 屬性用於指定影像或影片如何調整大小或裁剪以適應其容器。

語法

object-fit: fill | contain | cover | scale-down | none | initial | inherit;

屬性值

值	描述
fill	影像或影片完全填充容器，可能會扭曲其縱橫比。預設值。
contain	影像或影片按比例縮放以適應容器，同時保持其縱橫比。它可能會在容器中留下空白空間。
cover	影像或影片按比例縮放以覆蓋整個容器，同時保持其縱橫比。這可能會導致影像/影片的某些部分被剪裁。
scale-down	如果影像或影片大於其原始尺寸，則將其縮小以適應容器；否則，則以其原始尺寸顯示。
none	影像或影片以其原始尺寸顯示，而不管容器尺寸如何。它可能會超出容器。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS Object Fit 屬性示例

以下示例解釋了具有不同值的object-fit 屬性。

使用 fill 值的 Object Fit 屬性

為了允許元素完全填充容器，即使元素的縱橫比可能會被扭曲，我們使用fill 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: fill
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=1024 height=1024 />
</body>

</html>

使用 contain 值的 Object Fit 屬性

為了允許元素按比例縮放以適應容器並保持其縱橫比，我們使用contain 值。容器中可能會留下空間。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: contain
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=1024 height=1024 />
</body>

</html>

使用 cover 值的 Object Fit 屬性

為了允許元素按比例縮放以適應容器並保持其縱橫比，我們使用cover 值。這可能會導致元素的某些部分被裁剪。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: cover
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=1024 height=1024 />
</body>

</html>

使用 scale-down 值的 Object Fit 屬性

為了允許元素縮小以適應容器，我們使用scale-down 值。如果元素的大小大於容器，則其大小將設定為none 或content 中較小的一個。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid black;
         height: 250px;
         width: 350px;
         object-fit: scale-down;
      }
   </style>
</head>

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: scale-down
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=1024 height=1024 />
</body>

</html>

使用 none 值的 Object Fit 屬性

為了允許元素保持其原始大小，我們使用none 值。如果元素的大小大於容器，則會發生溢位；如果元素的大小小於容器，則會出現間隙。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: none
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=1024 height=1024 />
</body>

</html>

支援的瀏覽器

屬性
object-fit	32.0	79.0	36.0	10.0	19.0

css_properties_reference.htm

列印頁面