根据响应式第一列的高度设置后续列的高度答案

【问题标题】：Set subsequent column height based on the height of a responsive first column根据响应式第一列的高度设置后续列的高度
【发布时间】：2017-09-17 00:47:50
【问题描述】：

对于那些将其标记为重复的人，我不想实现这一点：How can I make Bootstrap columns all the same height?

我在处理响应式图像的同时保持纵横比，处理图像与仅仅增大一列不同。

请参阅下面的图片以获取有关我要实现的目标的更多信息。

Image:

我有 2 个主要的 cols。第一个分为2个，有2个图像555*670。第二列又分为 2 列，包含 4 张图片。

我希望第二列 (266*370) 中的图像适应第一列。也就是说，第二列的组合高度应等于第一列（555*670）。第一列和第二列中的 4 个图像应具有相同的高度，同时保持图像的纵横比，并且应具有响应性。

我愿意接受更改图像大小以实现此目的的建议。这是CodePen 的链接。我使用引导网格并将图像的宽度设置为 100%。

.img370{
   width:100%;
}
.img555{
   width:100%;
}

【问题讨论】：

你应该看看这个例子：stackoverflow.com/questions/19695784/…
@Baptiste 这不是我想要实现的，您提供的示例是关于使列长度与最长列相同。但我正在尝试实现其他目标，使第二列的高度与第一列相同。
@SebastianBrosch 不，与我的问题无关。发帖前我看过了
@Paulie_D 我正在编辑它，在图像上添加更多信息，现在应该没问题
这可能会有所帮助 - stackoverflow.com/questions/34194042/…

标签： html css twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案1】：

.row{overflow:hidden;}
.col-* {
     margin-bottom: -99999px;
     padding-bottom: 99999px !important;
}

【讨论】：

我将代码添加到 codepen，不幸的是我没有得到想要的结果。 codepen.io/nessen/full/oGXZOo

【解决方案2】：

如果您将图像添加为背景图像而不是内联 img 标签，我认为您会更轻松。

例如 CSS

.img555 {
    background-image:url('https://dummyimage.com/555X670/C0C0C0/fff');
    background-repeat:no-repeat;
    background-size:contain;
}

包含的背景大小可能是您想要的，这样图像就不会被裁剪，并且您可能需要为引导行设置高度值，以便在删除 img 标签后它们不会折叠。

祝你好运！

【讨论】：