CSS: 如何让img里的图片自适应div，且不变形

最新推荐文章于 2024-05-15 09:36:56 发布

ChuanYang Chen

最新推荐文章于 2024-05-15 09:36:56 发布

阅读量4.4w

点赞数 24

分类专栏：前端 CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_45525653/article/details/125259131

版权

73 篇文章 1 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

如何让img里的图片自适应div，且不变形

<div>
    <img src="..." alt="image">
<div>

解决方案：使用object-fit属性

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

object-fit中的几个属性值：

值	功能
fill	不保持纵横比缩放图片，使图片完全适应
contain	保持纵横比缩放图片，使图片的长边能完全显示出来
cover	保持纵横比缩放图片，只保证图片的短边能完全显示出来
none	保持图片宽高不变
scale-down	当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致