在 HTML 中縮放影象

Sushant Poudel 2023年2月19日 2021年10月30日
  1. 在 HTML 的瀏覽器視口中縮放大尺寸影象
  2. 在 HTML 中使用 widthmin-width 屬性縮放影象
在 HTML 中縮放影象

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

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

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

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

在下面的示例中,我們使用 vhvw% 等單位縮放大影象以適應視口。

示例程式碼:

<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 中使用 widthmin-width 屬性縮放影象

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

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

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

示例程式碼:

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

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn

相關文章 - HTML Image