CSS 图像大小调整

在网页设计中，经常需要使用图片来美化页面。而有时候，我们需要对图片进行大小调整。在 CSS 中，有多种方式可以对图像进行大小的调整。

1. 使用 width 和 height 属性调整图像大小

我们可以使用 width 和 height 属性来控制图像的宽度和高度：

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

上面的代码将图片的宽度设置为其容器的 50%，高度会根据宽度的比例自动调整。如果我们只设置了其中一个属性，另一个属性会自适应图片大小。

需要注意的是，这种方法是在 CSS 中直接修改图片大小，不会改变图片本身的大小，可能会使图片变得模糊。

2. 使用 background-size 属性调整背景图片大小

我们也可以使用 CSS 的 background-image 属性将图片设置为背景图片，然后使用 background-size 属性来调整背景图片的大小：

div {
  background-image: url("image.jpg");
  background-size: cover;
}

上面的代码将图片作为 div 元素的背景图片，并将其调整为覆盖整个元素。background-size 属性还有多个可选值，如 contain、auto、100% 等，可以根据需要调整背景图片的大小。

需要注意的是，这种方法同样只是在 CSS 中控制图片的大小，不会改变图片本身的大小。

3. 使用 img 标签的属性调整图片大小

在 HTML 中，img 标签也有一些属性可以用来直接调整图片大小：

<img src="image.jpg" alt="image" width="500" height="300">

上面的代码设置了图片的宽度为 500 像素，高度为 300 像素。需要注意的是，这种方法同样只是在 HTML 中控制图片的显示大小，不会改变图片本身的大小。

综上，我们可以根据需要选择不同的方法对图片进行大小调整。在选择时，需要根据实际需求来确定哪种方法更适合。