Masonry grid the same height

问题:

trying to set Masonry script to display images like on this page: http://www.stefanheinrichs.com/projects/ Is it possible? Maybe there is some other library that will be better ?

thanks for help in advance

回答1:

You can get even height if you don't mind a little cropping...

Using background-image and padding 50%.

The HTML

<div class="masonry-grid">

    <div class="masonry-item">
        <div class="background-image" style="background-image('http://mywebsite/images/cool-image-1.jpg')">
        </div>
    </div>

    <div class="masonry-item">
        <div class="background-image" style="background-image('http://mywebsite/images/cool-image-2.jpg')">
        </div>
    </div>

    <!-- etc -->

</div>

And the CSS

.background-image {
    padding: 50%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

You set the image as a background of a div. This takes advantage of the background cover CSS properties (which will crop you're image a little), and also lets you equalise the height using the padding 50% trick.

If you wanted 3 in a row you'd have to use 33.333333% (not tested), and 4 in a row 25%.

Apologies if not the right layout, your example link has gone down.