css 怎么控制图片不变形

Question

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

Answer 1

目前的解决的方法就是在image的mode属性中定义widthFix保持原图宽高比不变，然后在外面嵌套一个标签给定width和height 添加overflow: hidden; 这样就可以显示上半部分

Answer 2

<div calss="wrapper">
    <img>
</div>

.wrapper {
    height: 70px;
    width: 70px;
}

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

之前的写错了

Answer 3

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

Answer 4

要是能把图片img换成固定的背景就能用background covet，如果还是img那应该只能设固定宽高吧，不然就要用ps改一下原本图片的宽高吧

Answer 5

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

Answer 6

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