css如何设置图片不变形

制作网页中，图片不是固定宽度高度大小，但图片占位是固定宽度高度，如果使用CSS固定死图片大小（宽度高度），图片相对于这个位置不是等比例大小，那么这张图片就会变形。

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

本文来自css3答疑栏目，欢迎学习！

以上就是css如何设置图片不变形的详细内容，更多请关注0133技术站其它相关文章！