首页  >  文章  >  web前端  >  bootstrap怎么让图片自适应

bootstrap怎么让图片自适应

尚
原创
2019-07-11 15:38:484283浏览

bootstrap怎么让图片自适应

bootstrap让图片自适应的方法:    

1、如果是在页面上插入图片,就直接加上class="img-responsive"

2、如果是在内容页里面的话,直接用js给每个img加上属性就可以了。

$(".setting img").addClass("img-responsive center-block"); //center-block 图片水平居中

在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。

更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!

以上是bootstrap怎么让图片自适应的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn