css一行显示多张图片

CSS 是前端开发中不可或缺的技能，通过 CSS 你可以实现页面的各种视觉效果。在开发网页时，经常会遇到一行中需要显示多张图片的情况，该怎样实现呢？下面我们就要来介绍 CSS 实现一行显示多张图片的方法。

.img-group {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-group img {
  margin: 0 10px;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

首先，我们需要一个外部容器，这里使用了一个名为 img-group 的类名。这个容器需要使用 flex 布局，这样里面的元素才能实现横向排列。然后我们使用 justify-content 和 align-items 来让图片在容器中居中显示。

接下来，我们需要给每个图片设置样式。这里我们设置了图片的宽度和高度，同时使用 object-fit: cover 来让图片铺满整个容器并保持比例。同时为了让图片之间有间隔，我们通过 margin 设置了图片的左右边距。

最后，我们只需要在 HTML 文件中创建多个 img 元素，加上相同的类名 img-group，就可以实现一行显示多张图片的效果了。