CSS |对象适合属性

它是一个 CSS 属性，用于指定应如何调整图像或视频的大小以适合其内容框。

句法：

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

属性值：

• 填充：这是一个默认值。被替换的图像被拉伸以适合内容框。替换后的图像将完全填充框而不管其纵横比。

  句法：

  object-fit: fill;

  例子：

  输出：
  

• 包含：替换的图像保留原始图像的纵横比，同时适合内容框。

  句法：

  object-fit: contain;

  例子：

  输出：
  

• cover：此值还保留原始图像的纵横比，即在适合内容框时被替换的图像。有时，当原始图像的纵横比与内容框的纵横比不匹配时，它会被裁剪以适应。

  句法：

  object-fit: cover;

  例子：

  输出：
  

• none：替换后的图像将忽略原始图像的纵横比。因此，它不会调整大小。

  句法：

  object-fit: none;

  例子：

  输出：
  

• 缩小：被替换的图像被调整大小，就好像没有指定或包含一样，结果是最小的对象大小。

  句法：

  object-fit: scale-down;

  例子：

  输出：
  

• initial： initial 设置默认值，即替换的图像被拉伸以适应内容框，因为默认值是填充。

  句法：

  object-fit: initial;

  例子：

  输出：
  

• 继承：继承从父元素接收属性。当它与根元素一起使用时，将使用初始属性。

  句法：

  object-fit: inherit;

  例子：

  输出：
  

支持的浏览器： object-fit 属性支持的浏览器如下：

• 谷歌浏览器
• 火狐
• 歌剧
• 苹果浏览器