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如何设置图片不变形的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读