CSS参考手册
图像值 | Image Values
对象适合 | 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) |
图像值 | Image Values相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。