在 HTML 中縮放影象

1. 在 HTML 的瀏覽器視口中縮放大尺寸影象
2. 在 HTML 中使用 width 和 min-width 屬性縮放影象

在本教程中，我們將說明在 HTML 中縮放大尺寸影象的方法。

在 HTML 的瀏覽器視口中縮放大尺寸影象

我們可以使用影象中的 width 和 height 屬性在 HTML 中縮放大影象。大尺寸影象會超出螢幕邊緣。要將影象縮放到視口大小，我們可以使用容器並將其 height 和 width 屬性設定為視口的高度和寬度。我們可以使用 vh 和 vw 單位來設定大小。vh 和 vw 的一個單位對應於視口高度和寬度的 1%。我們可以使用設定為 100%來設定影象的高度和寬度。影象應插入容器內。然後，大尺寸影象將適合視口。

例如，使用類 container 在 HTML 中建立一個 div。在 div 內寫入 img 標籤並插入大尺寸影象。在 CSS 中，選擇 container 類並將其 height 和 width 設定為 100vh 和 100vw。接下來，選擇 img 標籤並將其 height 和 width 設定為 100%。

在下面的示例中，我們使用 vh、vw 和 % 等單位縮放大影象以適應視口。

示例程式碼：

<div class="container">
    <img src="https://images.all-free-download.com/images/graphiclarge/large_mushroom_199318.jpg" >
</div>

.container{
  height:100vh;
  width: 100vw;
}
img {
 width : 100%;
 height: 100%; 
}

在 HTML 中使用 width 和 min-width 屬性縮放影象

我們可以使用 width 和 min-width 屬性來縮放 HTML 中的影象。我們可以在設定 <img> 標籤樣式時使用這些屬性。width 屬性指定元素的寬度。min-width 屬性指定元素的最小寬度。僅當內容小於最小寬度時才會應用。否則，此屬性將不起作用。此外，此屬性還可以防止寬度屬性的值小於 min-width。我們在此方法中以畫素為單位表示 width 和 min-width。

例如，在 HTML 正文中，編寫 <img> 標籤。在 <img> 標籤內，通過 src 屬性指定影象的路徑。然後，在 style 屬性中指定 25vw 的 width 和 140px 的 min-width。然後，關閉 <img> 標籤，然後關閉所有之前開啟的標籤。

我們使用了 width 和 min-width 屬性來縮放影象。不適合視口的大尺寸影象可以適合視口。下面示例中的 25vw 寬度表示該寬度對應於視口寬度的 25%。通過這種方式，我們可以使用 HTML 中的 style 標籤來縮放影象。

示例程式碼：

<img src="/img/DelftStack/logo.png" style="width: 25vw; min-width: 140px;" />