bootstrap注意事项（七）图片

时间 2019-12-18

原文原文链接

在本章中，咱们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：css

.img-rounded：添加 border-radius:6px 来得到图片圆角。html

.img-circle：添加 border-radius:500px 来让整个图片变成圆形。bootstrap

.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。浏览器

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<img src="/course/554b2aa0d7e0396d67b0a556/download02.png"class="img-rounded">
<img src="/course/554b2aa0d7e0396d67b0a556/download02.png"class="img-circle">
<img src="/course/554b2aa0d7e0396d67b0a556/download02.png"class="img-thumbnail">
</body>
</html>布局

响应式图片

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

若是须要让使用了 .img-responsive 类的图片水平居中，请使用.center-block 类，不要用 .text-center。spa

SVG 图像和 IE 8-10

在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加width: 100% \9; 便可。Bootstrap 并无自动为全部图像元素设置这一属性，由于这会致使其余图像格式出现错乱。htm

图片形状

经过为 <img> 元素添加如下相应的类，能够让图片呈现不一样的形状。blog

跨浏览器兼容性

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

类	描述
.img-rounded	为图片添加圆角 (IE8 不支持)
.img-circle	将图片变为圆形 (IE8 不支持)
.img-thumbnail	缩略图功能
.img-responsive	图片响应式 (将很好地扩展到父元素)