Question

我有一个基于引导程序的网站，其中包含几个相同高度的图像，一些图像位于左侧，一些位于右侧：

<div class="container">
    <div class="pull-left">
        <img class="img-responsive" src="...">
    </div>
    <div class="pull-right">
        <img class="img-responsive" src="...">
    </div>
    <div class="pull-right">
        <img class="img-responsive" src="...">
    </div>
</div>

当容器太窄而无法容纳一行中的所有图像时，它们会垂直堆叠，如预期的那样。

现在我正在寻找同时调整这些图像大小的可能性，因此它们仍然可以水平放置并保持相同的高度（以及它们各自的比例）。我知道我可以使用javascript，但我实际上在寻找没有它的解决方案。这甚至可能吗？

其他一些信息：

图像不一定是相同的宽度，只是相同的高度
每张图片周围都有一个边距，每张图片都有相同的边距。如果保证金适用于img或周围div
解决方案可以假设每个图像的高度和宽度都是已知的
还知道图像数量

这里有一个Fiddle来显示当前状态的问题。

最后一句话：这引起了我的好奇心，所以虽然这是我遇到的实际问题，但我也对缺乏浏览器支持或者不适合现场制作页面但可能有效的解决方案感兴趣在未来的某个时刻。

Answer 1

这是一个flexbox解决方案：

.container {
  display: flex;
  background: white;
}

.container div {
  padding: 1%;
}

.container img {
  height: 100%;
  width: 100%;
}

div上的1％填充分隔图像。由于flex模型，div会自动缩放到相同的高度。

将img的高度和宽度设置为100％会使它们填充其父div并保持其高度/宽度比。

<强> Working Fiddle

缩放几个浮动图像以适合父容器的宽度

1 个答案: