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

Posted 2023-03-06

【中文标题】如何在单个图像周围添加边框，同时保持图像并排对齐？

【英文标题】：How can I add a border around individual images, while keeping images aligned side by side?

【发布时间】：2021-06-19 09:23:15

【问题描述】：

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

【问题讨论】：

欢迎来到 ***！请阅读How do I ask a good question?和How to create a Minimal, Reproducible Example

请分享您目前编写的代码，以便我们审查和更正

【参考方案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>