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:

HTML:

 

 

CSS:

.image-container {
width: 50px;
}

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

Images Aspect Ratio and Google Chrome

Leave a Reply

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