Css 实现图片自动裁切并保持原始比例的方法

很多时候网站编辑上传的图片，尤其是封面图片并不一定严格遵守设计尺寸，这就导致很多时候图片不按正常的比例显示，看起来非常丑，解决办法就是使用 css 的 object-fit 与 object-position 属性。

实现代码

img {
    width: 180px;
    height: 130px;
    object-fit: cover;
}

详细说明

object-fit

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

属性值：

fill	默认，不保证保持原有的比例，内容填充整个内容容器。可能会被拉伸。
contain	保持原有尺寸比例。内容被缩放。宽高至少有一个和内容区域的宽高一致，会出现空白。
cover	保持原有尺寸比例。但部分内容可能被裁切，内容可能不会被完整显示。
none	保留原有元素内容的长度和宽度，也就是说内容不会发生变化。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。最终呈现的是尺寸比较小的那个。
initial	设置为默认值.
inherit	从该元素的父元素继承属性。

属性示例：

object-position

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

object-position: 50% 50%;
object-position: right top;
object-position: left bottom;
object-position: 250px 125px;