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

更新於: 18-11-2022

6K+ 次瀏覽

開啟你的職業生涯

透過完成課程獲得認證

開始
廣告