I'm using css object-fit: contain to align and resize images of different sizes withing a grid,
and it works fine on Firefox, but on Chrome, when there's some latency, the images will first be stretched by height to 100%, and after 1 second they fit as they should.
my css looks like this:
.item img {
width: 100%;
object-fit: contain;
min-height: 250px;
max-height: 275px;
}
and the html:
<div class="item">
<a href="/prod/20">
<img src="/pictures/Products/20/t_5.jpg" alt="title1">
</a>
</div>
<div class="item">
<a href="/prod/21">
<img src="/pictures/Products/21/t_1.jpg" alt="title2">
</a>
</div>