bootstrap怎么让图片自适应

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

bootstrap怎么让图片自适应

bootstrap让图片自适应的方法:

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

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怎么让图片自适应的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:ASP.NET MVC5+EF6+EasyUI 后台管理系统微信公众平台开发
下一篇:bootstrap是干什么的

发表评论

关闭广告
关闭广告