Bootstrap5 图片(Images)

半兽人 发表于: 2020-07-27   最后更新时间: 2021-04-13 14:25:58  
{{totalSubscript}} 订阅,1316 游览

图片

将图像设置为响应式(这样它们永远不会变得比其父元素大),并为它们添加轻量级样式 -- 所有这些都通过类来实现的。

响应式图片

在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="...">

在线运行

排列图片

可以使用浮动类文本对齐类将图片对齐。块级图片可以使用.mx-auto margin实用类居中。

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" 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>


您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容



提问