图片

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

更新于: 2023-04-30 14:28:21 查看: 830

发布于: 2021-8-30 09:54 发布者: 大米

响应式图片

Bootstrap中的图像使用 .img-fluid进行响应。 这适用于 max-width: 100%; 和 height: auto; 到图像，以便与父元素缩放。
Placeholder Responsive 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 camera 200x200 
<img src="..." class="img-thumbnail" alt="...">

图像对齐

将图像与 辅助浮动类 或 文本对齐类对齐。 block 图像可以使用 .mx-auto margin工具类居中。
Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<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>
扫描二维码，手机查看
声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。
收藏 邀请