使用CSS将相同的宽高比应用于表格行中的每个图像

Question

我有一些图像具有相同的高度但不同的宽度。它们非常大，所以我需要它们来调整大小。问题是将这些图像放在桌面上给了我想要的结果我在Firefox中而不是Chrome.Here是代码：

table {
  width: 200px;
  height: 100px;
}
img {
  width: 100%;
}

<div id="container">
  <table>
    <tr>
      <td><img src="https://via.placeholder.com/150x1000" alt=""></td>
      <td><img src="https://via.placeholder.com/120x1000" alt=""></td>
      <td><img src="https://via.placeholder.com/110x1000" alt=""></td>
      <td><img src="https://via.placeholder.com/140x1000" alt=""></td>
      <td><img src="https://via.placeholder.com/130x1000" alt=""></td>
    </tr>
  </table>
</div>

如果您在Firefox上运行此操作，您将看到所有图像都具有相同的高度，因为应用了相同的宽高比。在Chrome上，这不会发生。它们都有不同的宽高比。

如何在Chrome和Firefox上使它们看起来一样？我可以根据需要更改结构（表格到div等）或使用javascript，任何需要的东西。

镀铬会发生什么

Firefox上发生了什么（我希望发生）

Answer 1

您可以简单地在容器内制作它们并应用固定高度：

.container {
 height:200px;
}
.container img {
 height:100%;
}

<div class="container">
  <img src="https://via.placeholder.com/150x1000" alt="">
  <img src="https://via.placeholder.com/120x1000" alt="">
  <img src="https://via.placeholder.com/110x1000" alt="">
  <img src="https://via.placeholder.com/140x1000" alt="">
  <img src="https://via.placeholder.com/130x1000" alt="">
</div>