CSS object-fit 属性

898 阅读1分钟

CSS object-fit 属性

标签定义及使用说明

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

注意: Internet Explorer/Edge 15 或更早版本的浏览器不支持 object-fit 属性。

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

效果图

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      .fill {
        object-fit: fill;
      }

      .contain {
        object-fit: contain;
      }

      .cover {
        object-fit: cover;
      }

      .scale-down {
        object-fit: scale-down;
      }

      .none {
        object-fit: none;
      }

      .main {
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div style="width: 300px;">
        <h1>object-fit 属性</h1>

        <h2>不使用 object-fit:</h2>
        <img
          src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
          alt="Paris"
          style="width:200px;height:400px;border:1px solid red"
        />

        <h2>object-fit: fill (默认):</h2>
        <img
          class="fill"
          src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
          alt="Paris"
          style="width:200px;height:400px;border:1px solid red"
        />

        <h2>object-fit: contain:</h2>
        <img
          class="contain"
          src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
          alt="Paris"
          style="width:200px;height:400px;border:1px solid red"
        />

        <h2>object-fit: cover:</h2>
        <img
          class="cover"
          src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
          alt="Paris"
          style="width:200px;height:400px;border:1px solid red"
        />

        <h2>object-fit: scale-down:</h2>
        <img
          class="scale-down"
          src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
          alt="Paris"
          style="width:200px;height:400px;border:1px solid red"
        />

        <h2>object-fit: none:</h2>
        <img
          class="none"
          src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
          alt="Paris"
          style="width:200px;height:400px;border:1px solid red"
        />

        <p>
          注意: Internet Explorer/Edge 15 或更早版本的浏览器不支持 object-fit
          属性。
        </p>
      </div>
    </div>
  </body>
</html>

属性值

描述
fill默认,不保证保持原有的比例,内容拉伸填充整个内容容器。
contain保持原有尺寸比例。内容被缩放。
cover保持原有尺寸比例。但部分内容可能被剪切。
none保留原有元素内容的长度和宽度,也就是说内容不会被重置。
scale-down保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。

参见

菜鸟教程 object-fit