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

阅读更多：CSS 教程

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

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

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

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

以下是一个示例代码：

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

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

以下是一个示例代码：

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

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

本文介绍了如何使用CSS来缩放HTML图片的宽度和高度。我们通过transform属性、百分比值和其他CSS属性的组合，可以轻松地调整和控制网页中图片的大小。通过灵活运用这些技巧，您可以打造出各种不同的图片效果，提升网页的视觉吸引力。

希望本文对您学习CSS中的图片缩放技巧有所帮助！