horizontal image rows with variable height

380 views Asked by At

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

There are 3 answers

1
Axel Cardinaels On BEST ANSWER

You could use Isotope for that !

http://isotope.metafizzy.co/

2
Johnny Juarez On
  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

0
Kruthi V On

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