I've been working on creating a gallery layout using flexbox similar to this design: Example of desired outcome
The goal is to have images displayed in two columns next to each other, resizing to the size of the largest image without distortion. On mobile, it should switch to one image per row.
You can view my current attempt on Codepen.
After trying different methods, I'm currently focusing on resolving the stretched image issue closest to what I want.
<div class="wrapper">
<header>
MY HEADER
</header>
<section>
<a href="" class= "unitie">
<img src="http://www.landscapes.org/london/wp-content/uploads/sites/8/2015/09/roadmap-to-landscapes-finance.jpg" />
</a>
<a href="" class= "meow">
<img src="https://s-media-cache-ak0.pinimg.com/originals/bd/99/3e/bd993e9921e1131fef606fcd99a03494.png" />
</a>
</section>
<footer>
2016
</footer>
</div>
CSS:
.wrapper {
display: flex;
flex-direction: column;
}
header {
display: flex;
}
section {
display: flex;
flex-flow: row wrap;
}
a {
width: 48%;
margin-left: 10px;
}
img {
max-width: 100%;
height: 100%;
}
I came across this technique online: Using aspect ratio for flex property However, I'm unsure how to determine the aspect ratio of an image and convert it into the flex-grow property value as demonstrated.
Any assistance would be greatly appreciated.