给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 | 保持原有比例,部分内容可能被剪切 |