object-fit

2020-07-07  本文已影响0人  Time_Notes

比如有一个元素 img,高度固定,宽度不固定,调整浏览器窗口大小的时候要img元素不变形,宽高比不变,直接用 object-fit 与 object-position 就可以了。


object-fit :这个属性决定了像 img 和 video 这样的替换元素的内容如何适应到其使用的宽高确定的框。

object-fit 有5个值:

值描述   

fill 默认值。填充,替换元素填满真个内容区域,可能会改变长宽比,导致拉伸。

contain 包含,保持原始的尺寸比例,保证替换元素完整显示,宽高至少有一个和内容区域的宽高一致,会出现空白。

cover 覆盖,保持原始的尺寸比例,保证内容区域被填满。替换元素可能会被切掉一部分,从而不能完整展示

none 保持原始尺寸比例。

scale-down 等比缩小。就好像依次设置了 none 和 contain,最终呈现的是尺寸比较小的那个。


object-position :属性规定了可替换元素的内容在其内容框中的位置。可替换元素的内容框中未被对象所覆盖的部分,则会显示该元素的背景(background)。默认值是 50% 50%,也就是水平垂直居中效果,其取值和CSS中 background-position 属性取值一样,表现特性也是一样,但 background-position 的默认值是0% 0% 。

上一篇下一篇

猜你喜欢

热点阅读