问题
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