圖片

響應式圖片

在Bootstrap版本3中,通過為圖片添加.img-responsive類可以讓圖片支持響應式佈局。其實質是為圖片設置了max-width: 100%;、height: auto;和display: block;屬性,從而讓圖片在其父元素中更好的縮放。

如果需要讓使用了.img-responsive類的圖片水平居中,請使用.center-block類,不要用.text-center。請參考助手類章節了解更多關於.center-block的用法。

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

圖片形狀

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

免費圖片 https://pixabay.com/