CODEWITHSUNDEEP
javascripthtmlcsshtml-table
Lucas T.
Lucas T.

Reputation: 133

Apply same aspect ratio to every image in table row with CSS

I have a few images which have same height but different widths. They are pretty big, so I need them to be resized. The problem is placing those images on a table gives me the result I want in Firefox but not on Chrome.Here is the code:

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>

If you run this on Firefox, you'll see that all the images have the same height, because the same aspect ratio was applied. On Chrome, this does not happen. They all get a different aspect ratio.

How do I make them look the same on both Chrome and Firefox? I can change the structure if needed(table to div, etc) or use javascript, anything that's needed.

What happens on Chrome

What happens on chrome

What happens on Firefox(which I want to happen)

What happens on Firefox (which I want to happen)

Upvotes: 0

Views: 104

Answers (1)

Temani Afif
Temani Afif

Reputation: 274384

You can simply make them inside the container and apply a fixed height:

.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>

Upvotes: 3

Related Questions