如何在 HTML 中制作响应式图片？

响应式图片会自动调整至屏幕和选项卡大小。

要使图片响应式，我们必须首先使用 <img> 标签将图片添加到网页中，然后使用样式表，我们可以在 HTML 中改变图片的参数以使图片响应式。

语法

以下是 HTML 中使图片响应式的语法。

<img src="image.jpg" alt="alternate text…" style= "width: 100%;height: auto">

示例

以下是使图片在 HTML 中响应式的示例程序。在此中，我们使用了内联样式表。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <h3>Responsive Image</h3>
   <img src="https://tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt="test image" class="responsive" style="width: 100%;height: auto">
</body>
</html>

执行上述程序后，将显示一张图片，你可以调整所显示的图片。

示例

在下面的示例中，我们使用了内部样式表。

<!DOCTYPE html>
<html>
<head>
   <style>
      .responsive {
         width: 100%;
         height: auto;
      }
   </style>
</head>
<body>
   <h3>Responsive Image</h3>
   <img src="https://tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt="test image" class="responsive" >
</body>
</html>

执行上述程序后，将显示一张图片。如果我们想将响应式图片限制为最大尺寸，我们使用 max-width 属性，并使用像素值。

示例

以下是限制响应式图片的最大尺寸的示例程序。

<!DOCTYPE html>
<html>
<head>
   <style>
      .responsive {
         max-width: 100%;
         height: auto
      }
   </style>
</head>
<body>
   <h3>Responsive Image</h3>
   <img src="https://tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt="test image" class="responsive" >
</body>
</html>

更新于: 18-11-2022

6K+ 次浏览

开启你的职业生涯

通过完成课程获得认证

开始
广告