object-fit

描述

object-fit CSS 属性设置如何调整替换元素（例如 <img> 或 <video> ）的内容大小以适合其容器。

效果展示

语法

object-fit: fill | contain | cover | none | scale-down;

值

• fill 替换内容的大小适合填充元素的内容框：对象的具体对象大小是元素使用的宽度和高度。
• contain 替换内容的大小被调整为保持其纵横比，同时适合元素的内容框：其具体对象大小被解析为针对元素使用的宽度和高度的包含约束。s
• cover 替换内容的大小被调整为保持其纵横比，同时填充元素的整个内容框：其具体对象大小被解析为针对元素使用的宽度和高度的覆盖约束。s
• none 替换内容不会调整大小以适合元素的内容框：使用没有指定大小的默认大小调整算法确定对象的具体对象大小，默认对象大小等于替换元素使用的宽度和高度。
• scale-down 调整内容大小，就像指定“无”或“包含”一样，以会导致更小的具体对象大小为准。