使用 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>

更新于: 2020 年 6 月 12 日

超过 6 千次浏览

开启你的职业生涯

通过完成课程来获得认证

入门
广告