Images Aspect Ratio and Google Chrome


Google Chrome does not know how to maintain aspect ratio of images if the parent has “display: flex”.

In order to make it work and display the images in a responsive manner, the image must be contained inĀ  another element that has a width/min-width/max-width. Then also set max width and height for the image itself.

Here is a sample:





.image-container {
width: 50px;

img {
max-width: 50px;
max-height: 150px;
height: auto;
width: auto;

Leave a Reply

Your email address will not be published. Required fields are marked *