Примените одинаковое соотношение сторон к каждому изображению в строке таблицы с помощью CSS

Question

У меня есть несколько изображений, которые имеют одинаковую высоту, но разную ширину. Они довольно большие, поэтому мне нужно, чтобы они были изменены. Проблема размещения этих изображений на столе дает мне результат, который я хочу получить в Firefox, но не в Chrome. Вот код:

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>