圖片 響應式圖像 Images Figures

 

 

 

響應式圖像

 

Bootstrap中的圖像響應 .img-fluid

 

<img class="img-fluid" src="http://lorempixel.com/1024/580/business" alt="">

 

 

圖像會隨着父元素一塊兒縮放

 

 

圓角邊框

使用.img-thumbnail爲圖像提供圓形1px邊框外觀

 

<img class="img-fluid img-thumbnail" src="http://lorempixel.com/1024/580/business" alt="">

 

 

 

 

 

圓角圖片

<img class="img-fluid rounded" src="banner1.jpg" alt="">

 

 

 

圖片浮動  清除浮動

 

div中的img標籤使用了float-left

 

此時p元素在div的外面

可是卻在頁面中浮動上去了

 

此時必須在其外層div補上清除浮動

 

 這樣div內的排版不會對其餘部分形成影響 而形成跑版問題

 

 

 

圖片置中

方式一

<div class="clearfix">

<!-- 左右margin設置爲auto 將圖片的display設置爲block-->

<img class="img-fluid rounded mx-auto d-block" width="300px" src="banner1.jpg" alt="">

</div>

 

方式二 

 

<!--方式二: 將圖片視爲文字的一部分 在外層的部分設置 class="text-center"-->

<div class="text-center">

　　<img class="img-fluid rounded" width="300px" src="綠色樹林3440x1440風景壁紙_彼岸圖網.jpg" alt="">

</div>

 

 

Figures

 任什麼時候候你須要顯示一段內容 - 如帶有可選標題的圖像，請考慮使用<figure>。

 使用附帶的.figure，.figure-img以及.figure-caption類爲HTML5的<figure>和<figcaption>元素提供了一些基線的風格  

 請務必將該.img-fluid類添加到您的內容中<img>以使其具備響應性

 

  <figure class="figure">
            <img class="img-fluid rounded figure-img" width="900px" src="綠色樹林3440x1440風景壁紙_彼岸圖網.jpg"
                alt="A generic square placeholder image with rounded corners in a figure.">
            <figcaption class="figure-caption">A caption for the above image.</figcaption>
  </figure>