Bootstrap全局css样式之图片_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:39:44
原創
1093 人瀏覽過

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

(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">
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
图片的形状
登入後複製

通过为 Bootstrap全局css样式之图片_html/css_WEB-ITnose 元素添加以下相应的类,可以让图片呈现不同的形状。

登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
跨浏览器兼容性

请时刻牢记: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属性了,因为它默认是左右都有间隙的。
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
图片就到这了,希望对大家有帮助
登入後複製

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板