CSS 缩放 HTML 图片的宽度和高度（以百分比为单位）

在本文中，我们将介绍如何使用CSS来缩放HTML图片的宽度和高度，以及如何使用百分比来指定缩放比例。通过掌握这些技巧，您可以轻松地调整和控制网页中的图片大小。

阅读更多：CSS 教程

使用CSS的transform属性进行图片缩放

在CSS中，我们可以使用transform属性来对元素进行变换，其中包括缩放操作。这个属性可以通过scale()函数来指定缩放的比例。

要将图片的宽度和高度缩放到指定的百分比，我们可以使用以下代码：

img {
  transform: scale(50%);
}

在这个例子中，我们将图片的宽度和高度缩放到原大小的50%。您可以根据需要调整百分比的值来改变缩放比例。

使用百分比值设置图片的宽度和高度

除了使用transform属性之外，我们还可以直接使用CSS的width和height属性来指定图片的宽度和高度，并且可以使用百分比值来进行缩放。

以下是一个示例代码：

img {
  width: 80%;
  height: auto;
}

在这个例子中，我们将图片的宽度设置为父元素宽度的80%，高度则会根据原始图片的宽高比进行自动调整。通过调整百分比值，您可以根据需要来缩放图片的大小。

结合transform和百分比实现更精确的缩放

如果您希望在缩放图片时能够更精确地控制宽度和高度的比例，您可以结合使用transform和百分比来实现。

以下是一个示例代码：

.container {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
  transform: scale(0.8);
  transform-origin: top left;
}

在这个例子中，我们首先在容器中设置了一个固定的宽度和高度，并且使用overflow属性来隐藏超出容器大小的部分。然后，我们将图片的宽度设置为容器宽度的100%，使其自适应容器的大小。接下来，通过使用transform属性和scale函数，我们将图片的宽度和高度缩放到80%。最后，我们使用transform-origin属性来指定缩放的起始点，这里是左上角。

通过调整容器的宽度和高度以及缩放的比例，您可以实现精确的图像缩放效果。