Reputation: 133
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 Firefox (which I want to happen)
Upvotes: 0
Views: 104
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