图片(Images)

选择图像以响应行为的文档和示例(这样它们就永远不会比其父元素大)并为它们添加轻量级样式(全部通过类)。

响应式图片

Bootstrap中的图像通过.img-fluid作出响应。 将max-width:100%;和height:auto;应用于图像,以便与父元素缩放。

PlaceholderResponsive image
<img src="..." class="img-fluid" alt="Responsive image">
SVG images and IE 10

在Internet Explorer 10中,带有.img-fluid的SVG图像的大小不成比例。 要解决此问题,请在必要时添加“ width:100%\ 9;”。 此修复程序不适当地调整了其他图像格式的大小,因此Bootstrap不会自动应用它。

缩略图

除了我们的border-radius utilities外,您还可以使用.img-thumbnail将图像四舍五入 1px边框外观。

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

对齐图像

将图像与helper float classestext alignment classes. block-level images can be centered using the .mx-auto margin utility class.

Placeholder200x200 Placeholder200x200
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder200x200
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

照片

如果您正在使用元素为特定的指定多个``元素,请确保将.img- *类添加到中而不是 到``标签。

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