object-fit: contain image is stretched by height for 1 second on load in Chrome

33 Views Asked by At

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

There are 0 best solutions below