利用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
-
问题内容： 我发现调整图像大小以使其具有响应能力很棘手。 我正在开发一个php应用程序，以自动将网站转换为响应版本。我有点卡在图像上。 我已经成功将包装类添加到网站上的每个图像，并且可以很好地调整图像的大小。 我的问题在于图像自然小于窗口，例如徽标和图标。我不想调整这些大小。 我的代码当前会转换： 变成： 我在哪里使用以下CSS： 这将调整所有图像的大小，但是我只希望它调整超出页面宽度的图像的大小
-
问题内容： 我想保持相同的图像比例。问题是浏览器较宽时它会扭伤。并在缩小时挤压。 我在这里检查了所有SO问题，但大多数问题都没有帮助我。 这是 标记： 这是 CSS 问题答案： 从各个文件中删除以下CSS规则： 在home.php文件中 在carousel.css中 另外，添加到carousel.css文件中的类并从同一类中删除，因为您已固定了导航栏。
-
问题内容： 我注意到我的代码具有响应性，事实上，如果我将其缩放到手机或平板电脑的大小，则所有文本，链接和社交图标都会相应缩放。 但是，唯一没有的是我在体内的形象。包裹在段落标签中…话虽如此，是否有一种简单的方法也可以使图像具有响应性？ 这是我以前在体内显示图像的代码： 问题答案： 你可以尝试做 如果采用流畅的布局，则可以缩放图像。 为了响应（意味着布局对窗口的大小做出反应），您可以向图像添加一个类
-
问题内容： 我有一个网站（g-floors.eu），并且我想使背景（在CSS中我为内容定义一个bg图像）也具有响应性。不幸的是，除了我可以想到的一件事外，我真的对如何执行此操作一无所知，但这是一个解决方法。创建多个图像，然后使用css屏幕大小更改图像，但是我想知道是否有更实用的方法来实现此目的。 基本上，我想要实现的是图像（带有水印“ G”）自动调整大小，而不会显示更少的图像。如果可能的话 我到目
-
如何只在移动设备上显示折叠按钮和文本，在桌面上显示未折叠的内容？ 我可以使用这个例子，只显示文本的一部分。通过点击其中一个按钮，将显示文本的其余部分。这对移动来说很好。 但我如何使它显示所有的文本在桌面和隐藏按钮？要隐藏按钮,我可以添加： 并添加CSS类： 我正在考虑使用一个媒体查询，比如： 但我不确定这个类应该是什么样子的。当然，我可以使用'.mobile-show-more'类来处理桌面上的文
-
我是一个新手，有深入的工作，包括Wordpress 超文本标记语言 如果有人能帮我解决这个问题，我将不胜感激。