如何在 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.tw/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.tw/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.tw/coffeescript/images/coffeescript-mini-logo.jpg" alt="test image" class="responsive" >
</body>
</html>

更新日期：2022 年 11 月 18 日

已觀看 6K+ 次

開啟 職業 生涯

完成課程即可獲得認證

開始學習
廣告
© . All rights reserved.