Let's assume that we are working with the following structure:
html<div class = 'Box'> <img src = 'url_1'></img> <img src = 'url_2'></img> </div>
If we want to fit both images in the container:
terminal+––––––––––+––––––––––+ | | | | 50% | 50% | | | | +––––––––––+––––––––––+
And the CSS:
CSS.Box{ display: flex; } .Box img{ max-width: 50%; }
If we want to display the images in full-size, we need to apply flex-wrap: wrap
to the container:
terminal+––––––––––—––––––––––+ | | | 100% | | | +––––––––––––––––––––—+ | | | 100% | | | +––––––––––––––––––––—+
And the CSS:
CSS.Box{ display: flex; flex-wrap: wrap; } .Box img{ max-width: 100%; }
Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.