chrome doesn't respect image aspect ratio in flexbox chrome doesn't respect image aspect ratio in flexbox google-chrome google-chrome

chrome doesn't respect image aspect ratio in flexbox


The items in a flexbox will stretch their size by default.Seeing you want them to not stretch on the cross-axis (vertical), you can use the align-items on the container, to change the default behaviour.

Fiddle: http://jsfiddle.net/g1vLff23/

CSS

.flexbox {  width: 100%;  display: flex;  align-items: flex-start;}img {  width: 50%;}


Apply object-fit: scale-down; to the images. Yes, adding height: auto; does not do the trick, unfortunately. Similar issue solved here: max-width of img inside flexbox doesn't preserve aspect ratio


You can solve this by adding the height property to your img rule and giving it a value of auto:

img{    height:auto;    width:50%;}