I want to make a justified image gallery with fixed width images of variable height. Unfortunately I can only find justified galleries with fixed heights.
When fixing the width instead of the height, white-space appears between the images vertically.
current situation: http://redbird.driesbos.com/justified.html
should become: http://www.redbird.driesbos.com/Capture1.jpg
HTML
<section id="justified">
<a href="project-page1.html">
<img src="img/justified1.jpg"/>
</a>
<a href="project-page2.html">
<img src="img/justified2.jpg"/>
</a>
</section>
CSS
#justified {
padding: 30px;
width: 95vw;
text-align: center;
margin: auto;
}
#justified img {
height: auto;
width: 420px;
display: inline-block;
float: middle;
}
You could use Isotope for that !
http://isotope.metafizzy.co/