如何在 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>

更新日期：2022 年 11 月 18 日

已观看 6K+ 次

开启 职业 生涯

完成课程即可获得认证

开始学习
广告
© . All rights reserved.