css 怎么控制图片不变形

Question

在做一个小程序的需求：就是让后台穿过的img的数据显示不变形，但是设计给的效果是 70乘70，后台传过的img的尺寸不固定 可能是100乘200、或者80乘120 等等人物的头像。有什么解决的方法可以解决穿过的图片不变形吗在对应的70*70的容器里面，或者怎么剪裁只限制只显示头像部分也可以，我试验image的mode里面的属性，但是都不尽如意，有做过的大神请指教一下 谢谢。

Answer 1

<div calss="wrapper">

    <img>

</div>

.wrapper {

    height: 70px;

    width: 70px;

}

img {

    height: 100%;

    width: 100%;

    object-fit: cover;

}

之前的写错了

Answer 2

object-fit 会有兼容性的问题
用js 把图片获取src做成背景图片（隐藏img） 然后给容器背景使用cover是最保险的做法
一定要用img 那就要判断这张图片是水平的还是垂直的 然后分别对应不同的css 比如垂直的 就绝对定位 宽度100% 高度自动 然后用css垂直居中

Answer 3

补充以上，不变形的话，可以固定一边，另一边auto

Answer 4

首先我说一句，你上传图片的时候不做限制，无论怎么改，总有另一部分的图片是会看上去不符合的。
然我我写图片是判断一下图片的宽高比，然后按小的那个100%，另一个auto。
我传个1000px*1px的图上去，怎么办，对吧，所以最后强调一局，上传图片的时候就让他们按照规则来，不然怎么可能什么图片都可以不变形。你自己写好代码然后给他们一个规则，