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%,以确保图片能够铺满整个容器，如果图片的高度大于宽度，那么高度将自动按比例缩放。

相关问题与解答：

1. 如何设置图片的最小宽度和最大宽度？

答：`img { min-width: 100px; max-width: 500px; }`，这样可以保证图片的最小宽度为100px,最大宽度为500px。

2. 如何设置图片的最大高度？

答：`img { max-height: 500px; }`，这样可以保证图片的最大高度为500px。

3. 如何设置图片的边框？

答：`img { border: 1px solid black; padding: 10px; box-sizing: border-box; }`，这样可以给图片添加一个黑色的边框，同时给图片添加内部的padding,使图片看起来更加清晰，`box-sizing: border-box;`可以确保padding和border不会影响到图片的尺寸。

4. 如何设置图片的对齐方式？

答：`img { vertical-align: middle; text-align: center; display: block; margin: auto; }`，这样可以使图片在文本中间垂直居中显示。