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

给img添加 object-fit属性

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

你可能感兴趣的:(css)