砌体网格高度相同 [英] Masonry grid the same height

问题描述

试图设置砌筑脚本以显示类似于此页面的图像: http://www.stefanheinrichs.com/项目/ 是否有可能? 也许还有其他一些更好的库?

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 ?

谢谢您的帮助

推荐答案

如果您不介意收割，您甚至可以获得身高.

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

使用背景图片并填充50％.

Using background-image and padding 50%.

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>

和CSS

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

您将图像设置为div的背景.这利用了背景封面CSS属性的优势(将使您的图像变得有些小)，还使您可以使用填充50％技巧来使高度相等.

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.

如果您想连续使用3个，则必须使用33.333333％(未测试)，连续使用4个25％.

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.

这篇关于砌体网格高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！