时间戳

首页 > 解决方案 > 使用 css 使画廊响应式

javascript - 使用 css 使画廊响应式

问题描述

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

在此处输入图像描述

但是，我实际实现的是： 在此处输入图像描述

图像之间基本上有太多空间，我找不到解决方法。我知道这是因为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;

}

标签： javascripthtmlcssreactjsantd

解决方案

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

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

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

推荐阅读