如何摆脱图像下的空隙？

在web开发中，常常会遇到图片导致下面出现空白的问题。这是因为图片是一种替换元素（replaced elements），它的宽度和高度不受CSS控制。如果图片本身比它所在容器的宽度和高度小，那么它就会占据自己的实际宽度和高度，并留下周围的空白。这时候，我们可以采取以下方法：

1. 设置图片为块级元素并设置宽高

img {
  display: block;
  width: 100%;
  height: auto;
}

将图片的display属性设置为block，然后将宽度设置为百分之百，并保持高度自适应。这样，图片就会充满整个容器，并且不会留下空白。

2. 给图片设置css伸缩属性

img {
  max-width: 100%;
  height: auto;
  display: flex;
}

给图片设置 max-width 属性，表示图片的最大宽度为容器宽度的百分之百，并保持高度自适应。然后将容器的display属性设置为flex，这会让容器和图片一起伸缩，充满整个容器并且不会留下空白。

3. 使用background-image属性

.container {
  background-image: url('path_to_image');
  background-size: cover;
}

使用background-image属性将图片设置为容器的背景图片。在这种情况下，容器的大小由内容来决定。我们可以使用 background-size 属性来控制背景图片的大小，通常会将其设置为 'cover' 。这样图片就会充满整个容器，并且不会留下空白。

4. 使用object-fit属性

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

使用object-fit属性控制图片的大小和位置，并保持高度自适应。在这种情况下，图片的大小和位置由object-fit属性控制，而不是使用 width 和 height 属性。这样，图片会充满整个容器，并且不会留下空白。

使用上述方法可以有效地摆脱图片下面出现空白的问题，根据不同的需求，选择适合自己的方法即可。