前端：引入图片以及图片自动适应容器盒子

需求

在页面引入图片，并让图片的大小自适应容器盒子的大小

实现

• 在容器盒子里引入图片

<div>
	<img src="picture.jpg" alt="">
</div>

• 通过设置容器盒子和图片的让图片大小自适应

div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
}
img {
    width: 100%;
    height: 100%;
}

不管容器多大，将img的宽高设置成100%（这里的100%是相对于父级盒子的宽高而言）就能自适应容器大小。

其他

参考文章