图片大小超出div宽高时 如何按比例缩放

给img添加 object-fit属性

<div>
	<img src=" " />
</div>
div{
	width:100px;
	height:100px;
}
img{
	width:100%;
	height:100%;
	object-fit:cover;   //剪切图片，保留原始比例
}

object-fit属性所有的值
object-fit: fill|contain|cover|scale-down|none|initial|inherit;

值	描述
fill	默认，不保证保持原有比例，内容拉伸充满整个盒子
contain	保持原有比例。内容被缩放
cover	保持原有比例，部分内容可能被剪切