CSS object-fit 属性

原创已于 2023-04-01 17:41:17 修改 · 341 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #开发语言 #css3

于 2023-03-17 14:55:44 首次发布

object-fit属性用于控制img和video元素的内容如何适应其容器，提供包括fill、contain、cover等选项以保持比例或填充空间。cover常用于剪切以填充容器，而contain确保比例不失真。默认值fill会拉伸内容填充容器，none则不改变内容尺寸。scale-down则在保持比例的同时选择缩小内容至更小尺寸。

//对图片进行剪切，保留原始比例：
img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

定义

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

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

使用说明

可以通过使用object-position属性来切换被替换元素的内容对象在元素框内的对齐方式。

默认值:	fill
继承:	无。
动画:	无。
版本:	CSS3
JavaScript 语法:	object.style.objectFit="cover"

语法

属性值

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