图片
选择图像以响应行为的文档和示例(因此它们永远不会比其父元素大)并为它们添加轻量级样式(全部通过类)。更新于: 2023-04-30 14:28:21 查看: 676
发布于: 2021-8-30 09:54 发布者: 大米
响应式图片
Bootstrap中的图像使用.img-fluid
进行响应。 这适用于max-width: 100%;
和height: auto;
到图像,以便与父元素缩放。
<img src="..." class="img-fluid" alt="...">
图片缩略图
除了 border-radius utilities工具之外,你还可以使用.img-thumbnail
使图像具有1px的圆形边界外观。
<img src="..." class="img-thumbnail" alt="...">
图像对齐
将图像与 辅助浮动类 或 文本对齐类对齐。block
图像可以使用 .mx-auto margin工具类居中。
<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>
元素为特定的<img>
指定多个<source>
元素,请确保将.img-*
添加到<img>
而不是<picture>
标记中。
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
扫描二维码,手机查看
声明:部分数据/图片来源互联网,不代表Hluse Doc.,真实性请妥善甄别。