I need to create a pixel perfect landing portfolio page with same height but different widths thumbnails, I am having trouble with precision regarding images inside a DIV container.
On the first row I’ve created a grid and put div’s in them, the problem is the image heights appear 1, 2 or 3 pixels different from each other. I assume I need a specification on the div that contains the image to make that even, if so what would it be?
On the second row I’ve created a column in 3 different widths, same problem but much more pronounced, how should I fix it?
(All images have a class: 100% width, 100% height and Fit:Cover)
I need the image heights to be pixel perfect so I can build a CMS collection.
It’s my first time here so I created a red only link, hope this is correct:
Thanks in Advance
Hi @estela, for both rows you need to add Height: 100% on the parent container.
@ dennyhartanto , thank you so much for your reply.
I’ve applied the “Height:100%” on them (and also added switched the black for images to see if they were being distorted, they are not). I worked perfectly well on all of the blocks, except on the first column… any idea what to do?
If you’re using a grid, you can set your DIVs in that grid to fill the grid cell completely. Fill each DIV with your IMG ( 100%, 100% as Danny advised ), and use object-fit = cover to ensure there are no gaps. The image will preserve aspect ratio but will trim edges as needed to cover the entire space.
With this approach you can set your CSS grid column widths to whatever you want, and the image will completely fill each grid cell.