object-fit属性解决图片自适应问题

object-fit属性可以解决图像变形等问题，object-fit: cover，可以达到最佳的居中自动剪裁图片功能。

object-fit 属性由下列5个值：

1.  fill（默认值）

   内容拉伸填充满整个内容框。不保证保持原来比例。

2.  contain

   内容将被缩放，完全展示在内容框内。保持原来比例，会产生“空白”区域。

3.  cover

   内容保持原比例的同时填充满整个内容框。放大后超出内容框的区域会被剪裁掉。

4.  none

   保持原始尺寸大小，居中显示，超出隐藏。

5.  scale-down

   内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸更小。

object-fit属性效果图：