在网页设计中，图片是传达信息和美化页面的重要元素。CSS提供了多种方法来设置图片的大小，使得图片能够根据不同的布局和屏幕尺寸自适应。本篇攻略将详细介绍如何在CSS中设置图片大小，帮助你轻松掌握这一技能，让你的网页更加美观。
CSS设置图片大小的常用方法
1. 使用width和height属性
最直接的方法是使用
width
和
height
属性来设置图片的宽度和高度。这两个属性接受像素值（px）、百分比（%）或
auto
作为参数。
img {
width: 200px;
height: 100px;
}
2. 使用max-width和max-height属性
如果你想限制图片的最大尺寸，可以使用
max-width
和
max-height
属性。这两个属性同样接受像素值、百分比或
auto
作为参数。
img {
max-width: 200px;
max-height: 100px;
}
3. 使用百分比设置图片大小
通过使用百分比，可以使得图片的大小相对于其包含的容器来设置。
img {
width: 50%;
height: auto;
}
4. 使用object-fit属性
object-fit
属性允许你指定如何调整替换元素（如
）的内容大小以适应其容器。
img {
object-fit: cover; /* 容器内填充图片，可能会裁剪图片 */
}
object-fit
的值包括：
fill
：使对象铺满整个盒子，可能会变形。
contain
：保持对象的宽高比，完全适应盒子。
cover
：完全覆盖盒子，可能会变形。
none
：保持对象的宽高比，可能会出现空白区域。
scale-down
：如果
cover
或
contain
导致图片尺寸小于原始尺寸，则使用
none
。
5. 使用CSS视口单位
CSS视口单位（如
vw
、
vh
）可以根据视口的尺寸来设置图片的大小。
img {
width: 50vw; /* 宽度为视口宽度的50% */
height: auto;
}
实际应用示例
以下是一个HTML和CSS的示例，展示了如何使用CSS设置图片的大小：
通过以上方法和示例，你可以轻松地在CSS中设置图片的大小，从而让你的网页更加美观和实用。