迹忆客 专注技术分享

在本篇文章中，我们将说明在 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/test/logo.png" style="width: 25vw; min-width: 140px;" />