Masonry grid the same height

眉间皱痕 提交于 2020-01-17 03:52:08

问题


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.



来源:https://stackoverflow.com/questions/25212250/masonry-grid-the-same-height

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!