horizontal image rows with variable height

Question

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

Answer 1

You could use Isotope for that !

http://isotope.metafizzy.co/

Answer 2

1. Set your a to display:inline-block; float:left - it will kill whitespaces

2. Via javascript detect width of the links and set the same height:

   document.addEventListener('DOMContentLoaded', function () {
       var el = document.querySelectorAll('.someClass')
   
       function setElHeight() {
   
           var elWidth = el[0].offsetWidth;
           for (i = 0; i < el.length; i++) {
               el[i].style["height"] = (elHeight + 'px');
           }
       }
       setElHeight();
   });
   

I use this concept on my blog

Answer 3

Change both width and height to 100% so that all the images will have same width and height.