图片大小自适应

图片大小自适应

我们通过bootstrap可以很方便的实现图片的自适应：

<img src="..." class="img-responsive" alt="Pic">

如果不打算引用bootstrap，通过纯css，我们可以查看bootstrap中img-responsive类的定义：

.img-responsive {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

这样我们就用纯CSS完成了图片自适应；
对代码说明一下：display是让图片以内敛形式呈现，而且可设置宽高；
然后再用max-width设置宽度，它可以覆盖其他类对该标签width属性的设定；height让图片高度自适应，同样可以反过来设置，不过一般这种情况出现的更多