图片

添加响应式设计的图片,这很简单,只需要给图片加上一些类就可以了。

响应式图片

Bootstrap 中,给图片添加 .img-fluid 类,这样它就变成了一张响应式设计的图片。另外添加 max-width: 100%;height: auto; 可以让图片根据父元素的大小进行等比例缩放。

Generic responsive image
<img src="..." class="img-fluid" alt="Responsive image">
SVG 在 IE 10 上的表现

在Internet Explorer 10中,具有 .img-fluid 的SVG图像的大小不成比例。 要解决此问题,请添加 width: 100% \9; 。 由于此调整不能正确地调整其他图像格式的大小,因此Bootstrap不会自动应用它。

缩略图

除了使用 border-radius 工具, 你还可以使用 .img-thumbnail 类来设置一个1像素宽度的边框。

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-thumbnail">

对齐

给图像设置浮动类进行对齐。 块级图像可以使用 .mx-auto margin 工具居中。

A generic square placeholder image with rounded corners A generic square placeholder image with rounded corners
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
A generic square placeholder image with rounded corners
<img src="..." class="rounded mx-auto d-block" alt="...">
A generic square placeholder image with rounded corners
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Picture 标签

如果使用 <picture> 元素为特定的 <img> 指定多个<source>元素,请确保将 <img> 类添加到 <img> 而不是 <picture> 标记。

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>