在 HTML 中縮放影象
在本教程中,我們將說明在 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;" />
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