CSS 属性

CSS 中的 object-fit 属性用于指定如何调整或裁剪图像或视频以适合其容器。

属性值

该属性采用单个值，即关键字，如下所示:

  • contain:缩放图像/视频以适合容器，同时保持其宽高比。它可能会在容器内留下空白空间。

  • cover:图像/视频缩放以覆盖整个容器，同时保持其宽高比。这可能会导致图像/视频的某些部分被剪裁。

  • fill:图像/视频完全填充容器，可能会扭曲其宽高比。

  • none:无论容器大小如何，图像/视频都以其原始大小显示。它可能会溢出容器。

  • scale-down:如果图像/视频大于其原始尺寸，则将其缩小以适合容器，否则按其原始尺寸显示原始大小。

适用范围

替换元素，例如图像、视频等。

DOM 语法

object.style.objectFit = "contain | cover | fill | scale-down | none";

CSS object-fit 示例

以下示例演示如何使用具有不同值（例如 contains、cover、fill、scale-down、none）的 object-fit 属性 -

<html>
<head>
<style>
   h2 {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 1em;
      margin: 1em 0 0.3em;
   }

   img {
      width: 150px;
      height: 100px;
      border: 1px solid #000;
      margin: 10px 0;
   }

   .fill {
      object-fit: fill;
   }

   .contain {
      object-fit: contain;
   }

   .cover {
      object-fit: cover;
   }

   .none {
      object-fit: none;
   }

   .scale-down {
      object-fit: scale-down;
   }
</style>
</head>
<body>
   <div>
      <h2>object-fit: fill</h2>
      <img class="fill" src="/css/images/orange-flower.jpg" alt="object-fit: fill" />

      <h2>object-fit: contain</h2>
      <img class="contain" src="/css/images/orange-flower.jpg" alt="object-fit: contain" />

      <h2>object-fit: cover</h2>
      <img class="cover" src="/css/images/orange-flower.jpg" alt="object-fit: cover" />

      <h2>object-fit: none</h2>
      <img class="none" src="/css/images/orange-flower.jpg" alt="object-fit: none" />

      <h2>object-fit: scale-down</h2>
      <img class="scale-down" src="/css/images/orange-flower.jpg" alt="object-fit: scale-down" />
   </div>
</body>
</html>