当前位置:Gxlcms > JavaScript > 怎样实现图片大小自适应

怎样实现图片大小自适应

时间:2021-07-01 10:21:17 帮助过:49人阅读


图片大小自适应

我们通过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让图片高度自适应,同样可以反过来设置,不过一般这种情况出现的更多。

以上就是怎样实现图片大小自适应 的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行