如何在 HTML 中将图片变为响应式?

htmlweb developmentfront end technology更新于 2024/7/4 2:52:17

响应式图片会自动调整到屏幕尺寸和标签大小。

要使图片变为响应式，首先必须使用 <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://www.cainiaomax.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://www.cainiaomax.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://www.cainiaomax.com/coffeescript/images/coffeescript-mini-logo.jpg" alt="test image" class="responsive" >
</body>
</html>