使用 Bootstrap 使影像響應自如
要使 Bootstrap 中的影像響應自如,請將一個類 .img-responsive 新增到 <img> 標籤中。此類應用 max-width: 100%; 和 height: auto; 到影像,以便它能適當地縮放以適應父元素。
以下是你可以輕鬆地讓影像響應自如的方法 −
示例
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <img src = "https://tutorialspoint.tw/python/images/python_data_science.jpg" class = "img-responsive" alt = "Online Training"> </body> </html>
廣告
資料結構
網路
關係資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
JavaScript
PHP