图片
本文档及示例展示了如何让图片支持响应式行为(这样它们就不会超出父元素的宽度范围了)以及如何通过类(class)添加些许样式。
响应式图片
通过 Bootstrap 所提供的 .img-fluid
类让图片支持响应式布局。其原理是将 max-width: 100%;
和 height: auto;
赋予图片,以便随父元素的宽度变化一起缩放。
<img src="..." class="img-fluid" alt="...">
图片的缩略图
除了我们提供的 border-radius
实用类外,你还可以使用 .img-thumbnail
使图片的外观具有 1px 宽度的圆形边框。
<img src="..." class="img-thumbnail" alt="...">
对齐图片
通过使用 float
工具类或文本对齐类将图片对齐。块级(block-level)图片可以使用 .mx-auto
外边距实用类居中对齐。
<img src="..." class="rounded float-start" alt="..."> <img src="..." class="rounded float-end" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<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>