object-fit
object-fit
CSS 属性设置替换元素(如 替换元素,例如 <img>
或 <video>
)的内容应如何调整大小以适合其容器。
注意:object-fit
属性对 <iframe>
、<embed>
和 <fencedframe>
元素没有影响。
您可以使用 object-position
属性更改替换元素的内容对象在其元素框内的对齐方式。
试一试
语法
css
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;
/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;
object-fit
属性指定为从以下值列表中选择的一个关键字。
值
contain
-
替换内容按比例缩放以保持其 纵横比,同时适合元素的内容框。整个对象被调整为填充框,同时保持其纵横比,因此如果对象的纵横比与框的纵横比不匹配,则对象将被 "信箱化"。
cover
-
替换内容按比例缩放以保持其纵横比,同时填充元素的整个内容框。如果对象的纵横比与框的纵横比不匹配,则对象将被裁剪以适合。
fill
-
替换内容被调整大小以填充元素的内容框。整个对象将完全填充框。如果对象的 纵横比 与框的纵横比不匹配,则对象将被拉伸以适合。
none
-
替换内容不会调整大小。
scale-down
-
内容被调整大小,就像指定了
none
或contain
一样,两者中哪一个会导致更小的具体对象大小。
正式定义
正式语法
示例
为图像设置 object-fit
HTML
html
<section>
<h2>object-fit: fill</h2>
<img class="fill" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="fill narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
<h2>object-fit: contain</h2>
<img class="contain" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="contain narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
<h2>object-fit: cover</h2>
<img class="cover" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="cover narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
<h2>object-fit: none</h2>
<img class="none" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="none narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
<h2>object-fit: scale-down</h2>
<img class="scale-down" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
</section>
CSS
css
h2 {
font-family:
Courier New,
monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
img {
width: 150px;
height: 100px;
border: 1px solid #000;
margin: 10px 0;
}
.narrow {
width: 100px;
height: 150px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
结果
规范
规范 |
---|
CSS 图像模块级别 3 # the-object-fit |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
- 其他与图像相关的 CSS 属性:
object-position
、image-orientation
、image-rendering
、image-resolution
。 background-size
- 了解纵横比