Heim >Web-Frontend >HTML-Tutorial >Bootstrap全局css样式之图片_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:39:441109Durchsuche

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

(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属性了,因为它默认是左右都有间隙的。
   
   
图片就到这了,希望对大家有帮助

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn