img如何保持纵横比（object-fit）

1.object-fit

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

2.属性值

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

3.区别

3.1fill

默认值。内容拉伸填满整个content box,不保证保持原有的比例。

3.2contain

保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。

3.3cover

保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。

3.4none

保持原有尺寸比例。同时保持替换内容原始尺寸大小。

3.5 scale-down

保持原有尺寸比例如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真;容器尺寸小于图片内容尺寸，用法跟contain—样。