概要

该 object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

初始值 fill
适用于 替换元素
遗传
媒体 视觉
计算值 按规定
动画类型 离散的
为了规范 通过正规的语法定义的唯一无歧义的秩序
/* 关键属性 */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

/* 全局属性 */
object-fit: inherit;
object-fit: initial;
object-fit: unset;

初始值fill
适用元素replaced elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

 

 

语法

object-fit属性由下列的值中选择一个关键字来指定。

fill
被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。
contain
被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。
cover
被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。
none
被替换的内容尺寸不会被改变。
scale-down
内容的尺寸就像是指定了nonecontain,取决于哪一个将导致更小的对象尺寸。

形式语法

fill | contain | cover | none | scale-down

HTML 内容

<div>
  <h2>object-fit: fill</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>

  <h2>object-fit: contain</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>

  <h2>object-fit: cover</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>

  <h2>object-fit: none</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>

  <h2>object-fit: scale-down</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>

</div>

CSS 内容

h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

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

效果

规范

规范 状态 定论
CSS图像值和替换内容模块4级
在该规范'对象配合“的定义。
工作草案 from-imageflip关键字已被添加。
CSS图像值和替换内容模块级3
在该规范'对象配合“的定义。
候选推荐 初始定义

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特征 谷歌 火狐(Gecko) IE 欧朋 Safari(苹果浏览器)
基本支持 31.0 36 不支持 11.60-
19.0
特征 Android 火狐移动(Gecko) IE移动 欧朋移动 Safari移动
基本支持 4.4.4 36 不支持 11.5-
24

其他

文档标签和贡献者

此页面的贡献者: Ahhaha233, pujiaxun, n313893254, someblue, jingqianduan
最后编辑者: Ahhaha233,