使用 Bootstrap 制作响应式图片
bootstrapweb developmentcss framework更新于 2026/2/5 4:28:17
要在 Bootstrap 中制作响应式图片，请为 <img> 标签添加 .img-responsive 类。该类会将 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://www.cainiaomax.com/python/images/python_data_science.jpg" class = "img-responsive" alt = "Online Training"> </body> </html>
