img图片太大设置图片宽高，图片显示变形解决办法

当img图片太大时，设置图片宽高图片显示就会变形，object-fit属性就可以很好的解决这个问题：

 

 <div>
   <img                  
     src="https://img0.baidu.com/it/u=2781068817,2482511563&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=449"/>
 </div>

 img{
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin: 10px 10px 0;
      object-fit: cover;
 }

 object-fit: fill|contain|cover|scale-down|none|initial|inherit;

值	描述
fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain	保持原有尺寸比例。内容被缩放。
cover	保持原有尺寸比例。但部分内容可能被剪切。
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
initial	设置为默认值，关于 initial
inherit	从该元素的父元素继承属性。 关于 inherit

样式分别如下：