在 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