Why is my picture overflowing in my grid
Can someone help me with this problem? My image is overflowing but I don't understand why.
https://codepen.io/commproNL/pen/mdQWmqY
5 Replies
max-height: 100px on the figure seems to be the cause
Yes, but no. The figure may be max 100px. the image has an object-fit: contain; so (as im correct) the image should place itself inside the figure
if you gonna specify max-height and use a bigger image that image will overflow no matter what else you put if i'm not mistaken
the solution would be to use background-image instead
https://codepen.io/commproNL/pen/oNQZWmV
When I give the figure a max-height in this example everything works
Aparently I fixed it 😂 put 100% height on the parent (in this case .footer__item .icon) and that fixed the problem