提问者:小点点

利用css使图库具有响应性


图像之间基本上有太多的空间,我找不到解决的方法。我知道这是因为justify-content:space-between;,但是没有任何方法可以修复它吗?

代码

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


.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;

}

共1个答案

匿名用户

使用space-between规则,您不能控制图像之间的空间。我的建议是:

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

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