转载

Bootstrap--全局css样式之图片

好久没有更新博客了，在这里跟大家分享一下生活的小乐趣，作为程序员，整天对着电脑是很不爽的，加班也是常有的，所以连续工作对身体是很不爽的，而且随着年龄的增加，程序员身体状况会越来越差，还是建议大家要常去锻炼下身体，拉伸下颈椎和肩部，等你去了，你会发现很爽的

（1）图片

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

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center 。

SVG 图像和 IE 8-10

在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加 width: 100% /9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。

使用的方法如下：

<img src="..." class="img-responsive" alt="Responsive image">

图片的形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

跨浏览器兼容性

请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。

<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">

其中img-rounded是以矩形显示图片，img-circle是圆形显示图片，img-thumbnail也是矩形显示图片，但四周跟边框会有空隙。

注：1，一般图片形状的类会与自适应这个类一起使用

    2，在同一个网站下，两张图片显示的效果要一样，需要图片的像素也要一样或者不能相差太多，不然使用了自适应，展示的效果你会发现差好多。

    3，将图片放在栅格系统属性类下面，你会发现图片左右都会有间隙，这时你就要修改它的css属性了，因为它默认是左右都有间隙的。

图片就到这了，希望对大家有帮助

正文到此结束

所属分类：编程技术

本文标签： CSS Bootstrap 网站自适应程序员响应式
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

Bootstrap--全局css样式之图片

SVG 图像和 IE 8-10

跨浏览器兼容性

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流