如何在单个图像周围添加边框，同时保持图像并排对齐？答案

【问题标题】：How can I add a border around individual images, while keeping images aligned side by side?如何在单个图像周围添加边框，同时保持图像并排对齐？
【发布时间】：2021-06-19 09:23:15
【问题描述】：

我试图在每个单独的图像周围设置一个边框，同时保持它们之间的间隔并排成五行。

【问题讨论】：

欢迎来到 StackOverflow！请阅读How do I ask a good question?和How to create a Minimal, Reproducible Example
请分享您目前编写的代码，以便我们审查和更正

标签： html css image border

【解决方案1】：

让我们一步一步来。

首先将图像彼此相邻对齐，连续 5 张图像，我们可以使用 css-grid。为此，我们需要将所有图像包装在一个容器中。我们将display: grid; 应用于容器。然后我们使用grid-template-columns: repeat(5, 1fr); 来应用 5 个大小相等的列。因此，我们将在同一行中有 5 张图片的确切大小。

应用边框会稍微破坏它们的布局。这是因为边框会占用额外的空间。为了解决这个问题，我们可以对图像使用box-sizing: border-box; 来调整它们的大小，包括边框和填充。因此，broder 将不再扩展图像大小。

.image-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
}

.image-container img {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.image-container img.border {
  border: 2px solid red;
}

<div class="image-container">
  <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0721.jpg">
  <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0722.jpg">
  <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0723.jpg" class="border">
  <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0727.jpg">
  <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0730.jpg" class="border">
  <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0731.jpg">
  <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0732.jpg">
  <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0733.jpg">
  <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0734.jpg">
  <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
</div>

【讨论】：