css如何设置图片不变形

解决方法有两种：

一、让图片和布局宽度高度成等比例，这样CSS设置死宽度和高度，图片也是等比例缩小，图片也不会变形。

// 原尺寸 300 * 200
// 等比缩放 2:1
img{
    width: 150px;
    height: 100px;
}

二、使用CSS max-width和max-height实现图片自动等比例缩小（相关课程推荐：css视频教程）

img{
    max-width: 300px;
    // 或者
    max-height: 100px;
}

三、给元素设置object-fit: cover

img{
    object-fit: cover
}

cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见