JavaScript HTML DOM Style objectFit 属性

• 

  objectFit 属性

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

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

  document.getElementById("myImg").style.objectFit = "cover";

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  属性
  objectFit	16.0+	31.0+	36.0+	7.1+	19.0+

• 

  语法

  返回objectFit属性：

  object.style.objectFit

  设置objectFit属性：

  object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"
• 

  属性值

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

• 

  技术细节

  项目	描述
  默认值：	fill
  返回值：	一个字符串，表示元素的对象拟合
  CSS版本	CSS3

• 

  相关页面

  CSS教程：CSS 对象适应

  CSS参考：CSS object-fit 属性