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%;}