CSS object-fit属性

• 

  定义和用法

  object-fit属性用于指定应如何调整<img>或<video>以适合其容器。此属性告诉内容以各种方式填充容器; 例如“保持纵横比”或“伸展并占用尽可能多的空间”。

  特征	说明
  默认值	?
  继承	没有
  动画	没有。CSS动画参考
  CSS版本	CSS3
  JavaScript语法	object.style.objectFit="cover"尝试一下

• 

  浏览器支持

  表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

  属性	IE/Edge	Chrome	FireFox	Safari	Opera
  属性名称
  object-fit	16.0+	31.0+	36.0+	7.1+	19.5+

• 

  CSS语法

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

  实例

  剪掉图像的边，保留纵横比，并填充空间：

  img.a {
   width: 200px;
   height: 400px;
   object-fit: cover;
  }

  尝试一下
• 

  属性值

  属性值	描述
  fill	这是默认的。 替换的内容大小适合填充元素的内容框。 如有必要，物体将被拉伸或压扁以适合
  contain	替换的内容被缩放以在适合元素的内容框时保持其纵横比
  cover	替换内容的大小可以在填充元素的整个内容框时保持其宽高比。 该对象将被裁剪以适合
  none	替换的内容未调整大小
  scale-down	内容的大小就像没有指定或包含（将导致较小的具体对象大小）
  initial	将此属性设置为其默认值。查看initial关键字
  inherit	从其父元素继承此属性。查看inherit关键字

• 

  相关页面

  HTML教程：HTML样式

  CSS教程：CSS对象适合