圖片 (Images)

全部經由類別來設定,選擇加入響應式(因而不會大於其父類別所設定的圖片尺寸)與增加輕巧樣式之文件和範例。

六角學院 六角學院

六角學院的 Bootstrap 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 課程。

立即上課去

響應式圖片

Bootstrap 中的圖片可利用 .img-fluid 設定為響應式。 max-width:100%;height:auto; 也需一併使用,讓圖片可依父元素屬性進行縮放。

Generic responsive image
<img src="..." class="img-fluid" alt="Responsive image">

SVG 圖片與 IE 10

Internet Explorer 10 中, 加入 .img-fluid 設定的可縮放向量圖形有比例不正確的問題。 要解決這個問題,請在必要時另加 width:100%\ 9; 的設定。 此設定對於其他圖檔格式並不適用,因此 Bootstrap 不會自動加入此設定。

圖片縮略圖

除了 邊框-圓角 公用程式 之外,你可以使用 .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
<img src="..." alt="..." class="img-thumbnail">

對齊圖片

helper float classestext alignment classes 讓圖片對齊。 block-level 的圖片可以使用 the .mx-auto margin utility class 置中。

A generic square placeholder image with rounded corners A generic square placeholder image with rounded corners
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
A generic square placeholder image with rounded corners
<img src="..." class="rounded mx-auto d-block" alt="...">
A generic square placeholder image with rounded corners
<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>