html - Bootstrap : Responsive row of equal-height images, 基于图像纵横比的宽度

Question

我觉得我已经阅读了大约 20 篇类似的帖子，但似乎没有一篇完全符合我要找的内容。

问题:

我有一排图片(例如 3 张)。每个图像都有不同的纵横比。我想连续显示所有图像，使它们的高度相等。包含图像的列的宽度是可变的。我不是自己固定高度，也不想随意限制图像的高度。图像(及其填充)完全填满水平空间；这决定了高度(因为纵横比保持不变)。当窗口缩小(到移动尺寸)时，我希望所有图像都像 Bootstrap 的响应式布局通常那样放置在另一个下方。

我已经尝试了很多东西。我很确定我不能使用 Bootstrap 列类(如 col-md-4)，因为它们会更改内容的大小以保持固定的宽度。据我所知，bootstrap 没有为此提供干净的解决方案。我也尝试过表格响应，这似乎没有帮助。非常感谢您的帮助。

Answer 1

解决方法:

td img {
    height: 12vw;
    width: auto;
    margin: 4px;
}
div {
    border: 1px solid gray;
}
table {
	width: auto;
    margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <table>
    <tr>
      <td>
      <img src="//placehold.it/200x150/2255EE">
    </td>
    <td>
      <img src="http://placekitten.com/300/450">
    </td>
    <td>
      <img src="http://placekitten.com/450/300">
    </td>
  </tr>
  </table>
  <table>
    <tr>
      <td>
        <img src="http://placehold.it/200x400">
    </td>
    <td>
      <img src="http://placehold.it/400x200">
    </td>
    <td>
      <img src="http://placehold.it/300x300">
    </td>
  </tr>
  </table>
</div>
</div>