bootstrap 图片自适应

用bootstrap框架实现图片自适应:

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

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

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

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

谷歌应用翻译:: 划词翻译
sublime Text 插件 空格提醒: Trailing Spaces

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,274评论 1 91
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 9,274评论 3 184
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,066评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,174评论 0 11
  • 今天的话题是:长这么大,哪次考试最令你印象深刻?这让我不由自主的想起护考,想起在护校的那段时光。 在新入学第一年里...
    念童and童小护阅读 227评论 1 3
  • 2个地方设置1.调用task取消 2.取消是会调用afn 的failurBlock的,那么就需要在这个里面判断取消...
    透亮心情阅读 827评论 0 0
  • 如今时代不一样,人们的心性也不一样了。面对纷扰的俗世,只求安稳静好。 家庭,是一个人幸福的根本。一个人开不开心,快...
    卓雅卓雅阅读 64评论 0 0
  • You Don't Know JS: this & Object Prototypes Chapter 4: Mi...
    大橙子CZ阅读 126评论 0 1