Limit height of masonry blog entry

Support
#1

hello there,

I’m looking for a solution to limit the height of an entry image in masonry display, without cropping it, neither stretching it.

this crop :
.x-masonry-active .entry-featured {
max-height: 400px;
overflow: hidden;
}

this stretch :
.x-masonry-active .entry-featured img{
max-height: 400px;
}

thanks for your help

#2

Hi There,

Thanks for updating in! You can make use of this code instead:

.x-masonry-active .entry-featured .entry-thumb img{ 
    min-width: 0;
    max-width: 100%;
    width: auto;
}

.x-masonry-active .entry-featured .entry-thumb {
    max-height: 400px;
    overflow: hidden; 
}

Please let us know if this works out for you.

#3

hi,

thanks for your help.

The code you provided crop the image like before.
I’m looking for a solution that would resize proportionnaly an image if its heigh exceed 400px.

thank you

#4

Hi There,

Try this:

    text-align: center; /* Let's put it to center in case it is smaller than the container*/
}
.x-masonry-active .entry-featured  .entry-thumb img {
    max-height: 400px !important;
    min-width: initial !important; /* We have to reset minimum width of the image */
    width: auto;
}
.x-masonry-active .entry-featured  .entry-thumb {
    display: inline-block;
}```

By default, the image is set to display as a block and set to 100% width. We have to reset those settings.
Hope this helps.
1 Like
#5

awesome !

Thanks for the solution and the explanation :grin:

#6

You’re welcome.