1.基本樣式

主要四個樣式類：

設置布局 .img-responsive : 可以讓圖片支持響應式布局，從而讓圖片在其父元素中更好的縮放；

設置形狀 .img-rounded ： 設置圖片為圓角；

設置形狀 .img-circle ： 設置圖片為圓形(照片若是長方形，則是橢圓形，照片若是正方形這是圓形)；

設置形狀 .img-thumbnail ：設置圖片為帶邊框(白色)；

?

?

<form class="form-horizontal"><div class="form-group"><div class="col-sm-10 col-xs-3"><img alt="" src="TEST.JPG" class="img-responsive"></div></div><div class="form-group"><div class="col-sm-4 col-xs-4"><img alt="" src="TEST.JPG" class="img-responsive img-rounded"></div><div class="col-sm-4 col-xs-4"><img alt="" src="TEST.JPG" class="img-responsive img-circle"></div><div class="col-sm-4 col-xs-4"><img alt="" src="TEST.JPG" class="img-responsive img-thumbnail"></div></div></form>

?

轉載于:https://www.cnblogs.com/devan/p/5208929.html

總結

以上是生活随笔為你收集整理的Bootstrap（七）：CSS--图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。