css实现图片自适应容器

经常有这样一个场景，需要让图片自适应容器的大小。

1、img标签的方式

我们马上就能想到，把width、height 设置为100%啊。来看一哈效果。

<div class='div1'><img src="./peiqi.png" alt="">
</div>

.div1 {width:500px;height:400px;border:1px solid black;
}
.div1 img  {/*width: 100%;height:100%;*/
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

这是正常的佩琪（如果图片比容器大的话，图片会超出容器）

.div1 {width:500px;height:400px;border:1px solid black;
}
.div1 img  {width: 100%;height:100%;
}