在网页设计中，调整图片大小是CSS的一个常见需求。通过CSS，我们可以方便地对图片进行大小调整，以下将详细介绍如何使用CSS来调整图片大小。
width 和 height 属性
使用`width`和`height`属性是最直接调整图片大小的方法。你可以指定像素（px）、百分比（%）或其他CSS单位来定义图片的宽度和高度。
img {
width: 200px; /* 设置图片宽度为200像素 */
height: 150px; /* 设置图片高度为150像素 */
}
当只设置`width`或`height`其中一个属性时，图片会等比例缩放以保持其原有的宽高比。
max-width 和 max-height 属性
使用`max-width`和`max-height`属性可以限制图片的最大尺寸，而不是固定尺寸。这允许图片在容器大小变化时进行响应式缩放，但不会超过设定的最大值。
img {
max-width: 100%; /* 图片最大宽度为父容器的宽度 */
max-height: 300px; /* 图片最大高度为300像素 */
}
object-fit 属性
当图片被指定了宽度和高度时，可能会出现图片被拉伸或压缩的情况，导致图片失真。`object-fit`属性可以控制替换元素的内容应该如何适应其盒子的大小。
img {
width: 200px;
height: 150px;
object-fit: cover; /* 图片会被缩放以完全覆盖盒子，保持宽高比 */
}
/* 或者 */
img {
width: 200px;
height: 150px;
object-fit: contain; /* 图片会被缩放以完全适应盒子内部，保持宽高比 */
}
`object-fit`的其他值包括`fill`（不保持宽高比，直接填充整个盒子），`none`（保持原有大小，不缩放），以及`scale-down`（效果如同`none`或`contain`中较小的一个）。
响应式图片
在响应式设计中，图片的大小可能会根据不同的屏幕尺寸进行调整。可以使用媒体查询（Media Queries）来针对不同的屏幕宽度应用不同的图片大小。
/* 默认样式 */
img {
width: 100%;
height: auto; /* 保持图片宽高比 */
}
/* 当屏幕宽度大于600px时应用以下样式 */
@media screen and (min-width: 600px) {
img {
width: 50%;
}
}
使用SVG
可缩放矢量图形（SVG）是一种使用XML来描述二维图形的语言，其优点是可以在不失真的情况下任意缩放。如果条件允许，使用SVG格式的图片可以更好地控制图片大小。
在CSS中调整图片大小的能力是创建美观、响应迅速的网页的关键。选择合适的方法取决于具体的项目需求，包括图片质量、页面性能、响应式设计需求等因素。通过灵活运用CSS属性，可以确保图片在任何设备上都能正确显示，提供良好的用户体验。