使用 css 使画廊响应式答案

【问题标题】：Making gallery responsive with css使用 css 使画廊响应式
【发布时间】：2021-05-01 13:45:36
【问题描述】：

我正在尝试建立简单的画廊。我想要实现的是：

但是，我实际实现的是：

图像之间基本上有太多空间，我找不到解决方法。我知道这是因为justify-content: space-between;，但也许还有另一个选项可以减少图像之间的空间？

HTML

<div class="photoContainer>
   <div class="ant-image">
    ...
   </div>
</div>

CSS

.photosContainer {
    width: 80%;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

.ant-image {
    height: fit-content;
    flex-shrink: 0;
    position: relative;
    display: inline-block;
    width: 200px;

}

【问题讨论】：

也许justify-content: flex-start;
@skobaljic 是的，可以解决问题，但创建一个我没有空格的新问题。当我尝试使用一些固定边距时，当我更改浏览器的大小时它看起来很糟糕，因为它经常在右侧留下空白。

标签： javascript html css reactjs antd

【解决方案1】：

您可以使用网格显示而不是 flex 来解决您的问题：

.photosContainer{
       display:grid;
       grid-template-columns:repeat(4 , 1fr);
                }

【讨论】：

谢谢看来可以很好用看这篇文章openclassrooms.com/en/courses/…。

【解决方案2】：

使用 space-between 规则，您无法控制图像之间的空间。我的建议是：

缩小图库容器，因为您的照片数量很少
为了更好地控制图像，您也可以对单个图像使用 % 宽度，就像对容器所做的那样。

提示：对单个图像使用属性 object-fit

【讨论】：