使用 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.com/python/images/python_data_science.jpg" class = "img-responsive" alt = "Online Training">
   </body>
</html>

更新于: 12-6-2020

6K+ 查看

开启你的 职业生涯

通过完成课程获得认证

开始吧
广告