CSS object-fit 属性

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

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


实例

裁剪图像的两边,保留长宽比,然后填充空间:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. img.a {
  6. width: 200px;
  7. height: 400px;
  8. object-fit: cover;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <h2>object-fit 属性</h2>
  14. <h2>object-fit: cover:</h2>
  15. <p>剪切图像的侧边,保留长宽比,并填充空间:</p>
  16. <img class="a" src="/images/paris.jpg" alt="paris" width="400" height="300">
  17. <h2>原始图像 :</h2>
  18. <img src="/images/paris.jpg" alt="paris" width="400" height="300">
  19. <p>注释:Internet Explorer/Edge 15 或更早的版本 不支持 object-fit 属性。</p>
  20. </body>
  21. </html>

定义和用法

object-fit 属性用于规定应如何调整 <img><video> 的大小来适应其容器。

这个属性告知内容以各种方式填充容器。例如“保留长宽比”或“展开并占用尽可能多的空间”。

默认值:see individual properties
继承:
动画制作:不支持。请参阅:动画相关属性
版本:CSS3
JavaScript 语法:object.style.objectFit="cover"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
object-fit31.016.036.07.119.0

CSS 语法

  1. object-fit: fill|contain|cover|scale-down|none|initial|inherit;
属性值
描述
fill默认值。调整替换内容的大小来填充元素的内容框。如有必要,对象将被拉伸或挤压。
contain缩放被替换的内容以保持其宽高比,同时适合元素的内容框。
cover调整被替换内容的大小,以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪。
none替换的内容不会调整大小。
scale-down内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。
initial将此属性设置为其默认值。参阅 initial
inherit从其父元素继承此属性。参阅 inherit

相关页面

CSS 教程:CSS object-fit

CSS 参考手册:CSS object-position

分类导航