Object-fit: cover and layout help
https://codepen.io/vince1444/pen/XWxvbMo
I want to make a layout that will not have any scrolling. The layout has a master grid, and inside that grid are 2 columns, one for the left-hand about me section and the right-hand column for the projects and testimonials. The projects and testimonials section is a grid container, and inside the grid container there are 2 columns, where each column is a flex container.
The problem lies in the images. When I add the images in, and when I give them a width/height of 100% and object-fit: cover, it does not maintain the layout. It makes the layout overflow and scroll.
To reiterate, I want the layout to be exactly like it's shown when you first open the codepen, before you remove
display: none from the images and start adding the object-fit stuff to them.
Also I'm aware I could use background-images for this, but I want to use actual imgs, mostly because of mobile. I don't want to have to start setting explicit heights on mobile when I can just use an img that has a height already
I was able to fix this on my end with some weird position: relative/absolute hack, but there's got to be something I'm missing here. I'd appreciate it if anyone could take the time to look through this! 🙂12 Replies
If you want this exact layout, you can try to enforce it explicitly using
grid-templateThen I'd have to make exact areas, and different class names and all that, is that really the only way?
Actually, that doesn't work anyway. Images still overflow and expand out of the container
did you make your images responsive by giving them
max-width:100%;I don't have it in the codepen but yea I did try that
I updated the codepen
i can see no overflow
1 sec
So if I remove
max-width and put width on the img, it makes it fill the whole container, which is what I want. But instead of the container being confined to just the viewport, it expands
It might not necessarily be an img issue, more so I want the .work container to stop expanding past height: 100%
This would be really easy with a background-img, but yea I'd rather use images if possible
And like I said before, I was able to get it to work with imgs using a weird position absolute/relative hack but there's got to be a better wayi see you would need somehow make images even smaller if there is vertical overflow
I think it has something to do with the aspect-ratio and the browser trying to preserve that, so I tried grabbing the images from my figma design that have the right aspect ratio and it still overflows 😂
I think worst case scenario is I'll just use background-images, since they don't force the container to expand. It's annoying though because in mobile I'll have to set explicit heights on the cards, but it's whatever. I thought this would be really easy too, I still think I'm being stupid somewhere
if it's gonna be a static content you can use apect-ratio instead height to control the images better
Yea it is, I'll look into that thank you 🙂
Probably not the only way, but I also didn't test it, it was just a thought. I'm curious if aspect-ratio will make it work in this case
Images are a bit trickier than regular elements.
At smaller sizes, adding
display: block to the images fixes the issue (images are inline elements, so it leaves space under then for decenders in text, like the parts of j p etc that go below the baseline.
The issue at larger sizes is the images follow that width of their column, and as that gets big enough, they're able to grow in height as well. Your .grid has a height of 100%, but it just overflows out of that.
The height: 100% on the .image-container doesn't really mean very much, since the rows themselves have no explicit heights, so the rows height is being defined by the content inside them already.
Even the image having a height: 100% doesn't really mean much. It'll stretch if it needs to like in the middle column, but unless something is explicitly telling it to be smaller, it'll just go to it's "natural" height, whatever that is.
At large screens, then, when it's at it's regular width and height, it just maintains it's natural aspect ratio and grows in width.