css设置图片大小

在CSS中，我们可以通过多种方式来设置图片的大小，以下是一些常见的方法：

1. 使用像素(px)单位：这是最直接的方式，但需要手动指定图片的宽度和高度，`img { width: 200px; height: 200px; }`，这种方式适用于所有类型的图片，包括矢量图和位图。

2. 使用百分比(%)单位：这是一种相对单位，会根据父元素的大小进行缩放，`img { width: 50%; height: 50%; }`，这种方式适用于所有类型的图片，但可能会导致图片失真。

3. 使用视口单位(vw, vh):这是一种相对于视口大小的单位，会随着视口的大小变化而变化，`img { width: 50vw; height: 50vh; }`，这种方式适用于响应式设计，可以根据屏幕的大小调整图片的大小。

4. 使用rem单位：这是一种相对于根元素(html)大小的单位，会根据根元素的大小进行缩放，`img { width: 2rem; height: 2rem; }`，这种方式适用于所有的页面，无论其根元素的大小如何。

除了这些基本的设置方法外，CSS还提供了更多的功能，如边框、填充、背景等，可以让我们更精细地控制图片的显示效果。

下面是一个具体的示例代码：

body {
  background-image: url('pic.jpg');
  background-size: cover; /* 保持图片比例 */
}

img {
  width: 100%; /* 确保图片铺满整个容器 */
  height: auto; /* 如果图片的高度大于宽度，那么高度将自动按比例缩放 */
}

在这个示例中，我们首先设置了背景图片，并使用`background-size: cover;`来保持图片的比例，我们设置了图片的宽度为100%,以确保图片能够铺满整个容器，如果图片的高度大于宽度，那么高度将自动按比例缩放。