在 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