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

打印页面