html img和背景图处理图片不拉伸_img固定宽度和高度，不规则图片变形问题的解决方法...

日常项目中，后端传图不规则，比例大小不一。前端又要去做适应，是一个让人非常头大的问题。

总结了一个不规则图片不变形的解决方案：

注：先写一个长 300px 宽 200px 带边框的 div ，图片接近方形，实现图片正常显示不变形。

...

1、背景图法

通过背景图的 background-position 属性，可以使图片居中显示。国外一些网站有看到类似的案例，简单好操作。.box1{

background: url("https://hbimg.huabanimg.com/42d38784a9e5ad1cbce090966a7a87c274f5d27ba616-VMBaO0_fw658") no-repeat center center;

background-size: auto 100%;

}

这样可以显示完整的图片，不变形：

若要图片填满容器，可以将 background-size 属性改为 100% auto ：background-size: 100% auto;

如下图：

同样 background-size 的 contain (完整显示)和 cover (填充)属性也能起到相同的效果。

2、object-fit

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框，不支持IE。

可用属性：