跳到主题内容 跳到文档导航栏

图片

文档和示例，用于将图像选择为响应行为（因此它们永远不会比其父元素大）,并通过类向它们添加轻量级样式。

在本页面

响应式图像

Bootstrap的图像使用 .img-fluid进行响应。 这将对图像应用 max-width: 100%; 和 height: auto;，以便它随父元素缩放。

PlaceholderResponsive image 
<img src="..." class="img-fluid" alt="...">

图片缩略图

除了我们的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="..." class="img-thumbnail" alt="...">

对齐图像

使用 帮助浮动类 或 文本对齐类将图像对齐。 block级图像可以使用 .mx-auto边距实用程序类来居中。

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

图片

如果要使用 <picture> 元素为特定的<img>指定多个 <source>元素，请确保将.img-* 类添加到 <img>而不是 <picture> 标签。

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