Bootstrap圖片 · 致力于web前端技術撰寫

Bootstrap提供了四種應用于圖片的class，分別是： **img-rounded**?添加border-radius:6px來獲得圖片圓角 **img-circle**?添加border-radius:50%來讓整個圖片變成圓形 **img-thumbnail**?添加一些內邊距（padding）和一個灰色的邊框 **img-responsive**圖片響應式 ### 1、img-rounded ~~~ <!doctype html> <html lang="en"> <head>  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="Yvette Lau"> <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> <title>BootstrapDemo</title>  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> </head> <body style="padding: 20px;"> <div class = "container"> <img src = "5.jpg" class="img-rounded" > </div> </body> </html> ~~~ .img-rounded{border-radius:6px;} 效果： ![](https://box.kancloud.cn/2016-04-07_570603f48b0ef.jpg) ### 2、img-circle ~~~ <body style="padding: 20px;"> <div class = "container"> <img src = "5.jpg" class="img-circle" > </div> </body> ~~~ .img-circle{border-radius:50%;} 效果(因為本圖片的寬高大小不同，所以呈現出橢圓，如果將width和height設置相同，那么會呈現出一個圓)： ![](https://box.kancloud.cn/2016-04-07_570603f4b74be.jpg) ### 3、img-thumbnail ~~~ <body style="padding: 20px;"> <div class = "container"> <img src = "5.jpg" class="img-thumbnail" > <img src = "4.jpg" class="img-thumbnail" > <img src = "3.jpg" class="img-thumbnail" > </div> </body> ~~~ .img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143; ????????????????? background-color:#FFF;border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-out;} 1. 效果： ![](https://box.kancloud.cn/2016-04-07_570603f4e2b79.jpg) ### 4、img-responsize ~~~ <body style="padding: 20px;"> <div class = "container" style = "width:150px;"> <img src = "5.jpg" class="img-responsive" width="400px" > </div> </body> ~~~ .img-responsive{display:block;max-width:100%;height:auto;} 效果(img中的width屬性值被忽略)： ![](https://box.kancloud.cn/2016-04-07_570603f5388cd.jpg)