In the photo gallery exercise in Pt. II, Layout, 2nd exercise, I noticed that both in my own solution as in the provided solution, the bottom edge of the 4x4 area doesn’t line up nicely with the cell to its left, there is slightly more white space.
I’m unclear as to what this whitespace is, because hierarchy-wise there is nothing ‘between’ the gallery container and the image in the provided solution .html. It seems to be the 2*2 grid area itself:
Different Object-fit settings don’t change it, setting image width to a higher value (e.g. 105%) moves the border down but also moves the right border to the right, the whole image gets bigger, in other words, creating an offset to the right, essentially moving the problem.
Has anyone noticed this and found/know a fix for it?
Thank you for the suggesion. I just tried it and it didn’t fix it. It is even visible in Mosh’s solution (although it’s less noticeably so than in mine).
I suggest u try setting a height and width property of your image container
before u can set your image height and width to 100%
if it still occurs the same just try a different image and see the result
The width of the image is set to 100%, but the height is never set so the photo keeps the same size ratio. This makes the object-fit: cover; rule a little useless. You can try to comment it out and see if it makes a difference. Once you have verified it is useless then uncomment it and add the ruleset below. The photo should now fill the height and width and the object-fit: cover; rule will resize the photo to preserve the aspect ratio.
