对象适合 | object-fit

对象匹配

大object-fit属性指定替换元件，如<img>或<video>，应该调整大小以适应其容器。

/* Keyword values */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: unset;

取决于指定的值object-fit，元素可以被裁剪、缩放或拉伸以适应其盒子。

Initial value	fill
Applies to	replaced elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

句法

大object-fit属性指定为从下面的值列表中选择的单个关键字。

价值

fill替换的内容大小可以填充元素的内容框。整个对象将完全填满盒子。如果对象%27s的纵横比与其盒的纵横比不匹配，则该对象将被拉伸以适应。contain被替换的内容被缩放以保持其纵横比，同时在元素的内容框中进行拟合。整个对象是用来填充盒子的，同时保持它的纵横比，所以这个对象将是“信盒”%28https：//en.wikipara.org/wiki/letterbox_%28拍摄%29%29，如果其纵横比与方框的纵横比不匹配。cover被替换的内容的大小是为了在填充元素的整个内容框时保持其纵横比。如果对象%27s的纵横比与其框的纵横比不匹配，则该对象将被裁剪以适合。none未调整已替换内容的大小。scale-down内容的大小就好像none或contain指定，以导致较小的具体对象大小。

形式语法

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;
}

输出量

规格

Specification	Status	Comment
CSS Image Values and Replaced Content Module Level 4The definition of 'object-fit' in that specification.	Working Draft	The from-image and flip keywords have been added.
CSS Image Values and Replaced Content Module Level 3The definition of 'object-fit' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	31.0	16	36 (36)	No support	11.60-o 19.0	7.1

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	4.4.4	36 (36)	No support	11.5-o 24	(Yes)