Bootstrap全域性CSS樣式之圖片
阿新 • • 發佈：2021-07-28
圖片
響應式圖片
在 Bootstrap 版本 3 中，通過為圖片新增.img-responsive類可以讓圖片支援響應式佈局。其實質是為圖片設定了max-width: 100%;、height: auto;和display: block;屬性，從而讓圖片在其父元素中更好的縮放。
如果需要讓使用了.img-responsive類的圖片水平居中，請使用.center-block類，不要用.text-center。
<img src="..." class="img-responsive center-block" alt="Responsive image">
圖片形狀
通過為<img>
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</while True: print('studying...')title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"> <script src="../js/jquery-3.3.1.min.js"></script> <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <img src="../html&css/300x300.jpeg" alt="..." class="img-responsive center-block img-thumbnail"> <!--邊上有白框的正方形--> <img src="../html&css/300x300.jpeg" alt="..." class="img-responsive center-block img-circle"> <!--圓形--> <img src="../html&css/300x300.jpeg" alt="..." class="img-responsive center-block img-rounded"> <!--正方形--> </div> </div> </div> </body> </html>