Bootstrap5 图片(Images)

半兽人 发表于: 2020-07-27   最后更新时间: 2020-07-27  

图片

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

响应式图片

在Bootstrap中的图片是用.img-fluid.来做响应的,它应用max-width: 100%;height: auto;到图片上,使它与父元素一起伸缩。

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

在线运行

Image thumbnails

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

<img src="..." class="img-thumbnail" alt="...">

在线运行

Aligning images

Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class.

<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

If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add the .img-* classes to the <img> and not to the <picture> tag.

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


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




上一条: Bootstrap5 版式设计(Typography)
下一条: Bootstrap5 表格(Tables)