I'm using object-fit:cover on some IMG tags within a wrapper div to try to fill a div with the image. I've noticed that some files seem to have their aspect ratios stretched, while others are displayed correclty. This occurs specifically in Chrome (I'm observing it on version 83).
It works ok on Edge (and Firefox):
I suspect this is a rendering bug in Chrome, and it may be triggered by the images having EXIF rotation metadata.
Here is a demonstration - https://codepen.io/mark_keo/pen/MWKXggz
<div>
Image which breaks:<br/>
<div style="width:400px; height:300px; display:inline-block;">
<img src="https://storage.googleapis.com/kms-au.appspot.com/sites/mc-spares/assets/e0b26d28-353a-4e8b-b23b-b89685fea303/5FE7A3BC-52C5-4157-9FA8-E48826E89352.jpeg" style="object-fit:cover;width:100%; height:100%;"/>
</div>
<img src="https://storage.googleapis.com/kms-au.appspot.com/sites/mc-spares/assets/e0b26d28-353a-4e8b-b23b-b89685fea303/5FE7A3BC-52C5-4157-9FA8-E48826E89352.jpeg" style="height:300px;"/>
</div>
<div>
Image that works:<br/>
<div style="width:400px; height:300px; display:inline-block;">
<img src="https://storage.googleapis.com/kmsstaging-au.appspot.com/sites/mc-spares/assets/a1169254-0bd1-46ed-89bf-6b4535006e49/x1d-xcd45-04.jpg" style="object-fit:cover;width:100%; height:100%;"/>
</div>
<img src="https://storage.googleapis.com/kmsstaging-au.appspot.com/sites/mc-spares/assets/a1169254-0bd1-46ed-89bf-6b4535006e49/x1d-xcd45-04.jpg" style="height:300px;"/>
</div>
So is there a mistake in the CSS/HTML or is this a browser bug?