make project thumbs have a fixed height / while filling it in with the correct aspect ratio

[leooo]

Hi all,
I will just rewrite my question cause my old post was not really clear:
is it possible to give the thumb container a specific height (px or %) and then let the project thumbnail be filled in with the object-fit: cover CSS command?

So to say I would want to have the possibility in the thumbnail grid to change to height of the thumbnails, without interfering with the actual aspect ratio of the image. Also if that means cropping.

Im not sure if that is a feature request or something i could solve with adding CSS to the thumb class.

thanks a lot in advance

Leo

[mariusjopen]

Dear @leooo
this is the only way I can think of:

.ph {
    padding-bottom: 50% !important;
}

.ph img {
    object-fit: cover;
}

Hope that helps!

Best!

Marius

[leooo]

@mariusjopen said in make project thumbs have a fixed height / while filling it in with the correct aspect ratio:

Dear @leooo
this is the only way I can think of:

.ph {
    padding-bottom: 50% !important;
}

.ph img {
    object-fit: cover;
}

Hope that helps!

Best!

Marius

@mariusjopen
Wow you saved my day! that is exactly the thing i was looking for! Now i dont need to make square thumbnails for everything and I like that I can play around with the % for the height!
Seriously I would have never gotten to that solution with my basic css skills. I didnt even find the .ph class in the inspector ^^
So useful especially for mobile! Thanks a lot!
http://editedit.dreamhosters.com/category/test/

[leooo]

@mariusjopen sorry I know this is not a CSS workshop: but Im too curious to know how the logic behind the lines is.
the padding bottom command is referring to which elements in the layout?

[mariusjopen]

Dear @leooo
the padding is used to set the height of the images.
This is kind of a trick and is not very commonly used. But in the Gridder it is very useful.

You can change the padding to change the height of the images.

Hope that helps :-)

Best!

Marius

[leooo]

@mariusjopen yes very much. i was playin around with that already very useful. But I realized its better to disable this in the specific project view, cause it messes around with cover feature and generally images in the first row of the gridder. but still so very useful! thanks a lot!

[mariusjopen]

Dear @leooo
you could make it only for for a specific Thumbnail Grid when you give it an idea.

Best!

Marius

[felix_rabe]

@mariusjopen is it possible to use this method with an element grid in stead of a thumbnail grid?

In the element-grid, the ph container seems to be empty.

[Richard]

Dear @fr

With Project Thumbnails within the Element Grid this is possible - With standard images not.
The image dimensions are set normally and not with this 'PH' padding.

So Image <img> being 100% width and its parent container controlling its dimensions:

E.g

.parent-container{
width:48%;
}

img{

width:100%;
height:auto;

}

Hope this answers your question :)

Best wishes
Richard