I've used the CSS flex box layout which appears as shown below:
If the screen gets smaller it turns into this:
The problem is that the images are not resized keeping the aspect ration from the original image.
Is it possible to use pure CSS and the flex box layout to let the images be resized if the screen gets smaller?
Here is my html and css:
.content { background-color: yellow;}.row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; box-align: center; align-items: center; background-color: red;}.cell { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; padding: 10px; margin: 10px; background-color: green; border: 1px solid red; text-align: center;}<div class="content"><div class="row"><div class="cell"><img src="http://i.imgur.com/OUla6mK.jpg"/></div><div class="cell"><img src="http://i.imgur.com/M16WzMd.jpg"/></div></div></div>