Bootstrap (8) Image 圖片與大小控制

發表於 更新於 分類於
介紹Bootstrap中與圖片大小的相關設定

教學應片

響應式圖片

在 img 加上 .img-fluid，會加上 max-width: 100%; height: auto; 屬性，讓圖片自適應父層寬度。

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

邊框圖片

在 img 加上 .img-thumbnail，替圖片加上 1px border 。

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

w-100

在 img 加上 .w-100， 會加上 width: 100%; 讓圖片填滿父層寬度

1
<img src="..." class="w-100" alt="...">

圖片區

1
2
3
4
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

當想要加上圖片的說明文字時，可以在 img 下用 figcaption 包住 說明文字，外層則用 figure