object-fit

比如有一个元素 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% 。