Thumbnails grid: Images Proportions
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
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.
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
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
