Thumbnails grid: Images Proportions

[Ilina Catana]

Hey Laytheme :)

I am looking to make a Thumbnails grid where the vertical and horizontal images would have the same proportions and not the same width.

I try to make it look like this:

It actually looks like this:

Here is the url of the page in question: http://www.andreaseifert.de/portfolio

Can you help me?

Thank you in advance! :)

Best,

Ilina

[edgrbnz]

Prepare your project thumbnails either as transparent PNGs in a square sized document. Or use a background coloured like your page-background.

Pretty much the same procedure you would use to prepare non-square Instagram posts.

[mariusjopen]

Dear @Ilina-Catana
I think the solution of @edgrbnz is simple and works.
Otherwise you can adjust the height or width with CUSTOM CSS and then use object-fit.

Have a look here, that might lead you into the right drection:
http://laythemeforum.com:4567/topic/3710/make-project-thumbs-have-a-fixed-height-while-filling-it-in-with-the-correct-aspect-ratio/2

Let me know when you need more help!

Best!

Marius

[Ilina Catana]

Hi @edgrbnz @mariusjopen,

thanks a lot for your answers.

I wanted to avoid my client the extra work of preparing each thumbnail separately with a transparent background.

My knowledge of CSS being limited, I worked with an offset on the "X" axis for all vertical images. For the moment it works relatively well on Desktop and Laptop.

Thank you again!

Ilina

[mariusjopen]

Dear @Ilina-Catana
if that works for you – then we are happy :-D

Best!

Marius