I am following the Webflow tutorials around ‘CSS Grid’, and making the image fit within a size-constrained box. Such as using ‘cover’, however, I am following the beginners tutorial for CSS Grids and making images fit within the frame - trying to make the image fit to the grid cell. However. It is not working for me, and I can’t tell if I am missing something after repeating the process twice from the start.
There are two effective ways to position content within your grid cells:
The first method is to adjust individual grid child settings. Select the specific grid child element, then navigate to the Style panel > Grid child section. Here you can fine-tune both alignment and justification settings for that particular element.
Alternatively, you can use the align box feature on the parent grid to quickly align all grid content at once. This tool provides X and Y axis controls for uniform alignment across all grid cells. You can learn more about this feature in the align box lesson.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hello there, thank you for your reply, but it doesn’t really answer my question properly. In essence, I am needing an image to fill the frame/cell space as based on the tutorial. The question is bit more specific than to the answer given. Another way or wording is like so…
You have a visible space ( a frame ) of 300 px
Your image is 1000 px
I need to find the setting which is inline with ‘only’ showing a portion of that image.
For example, on 300 pixels of that image or a portion of that image is shown. According to that movieclip I shared, it is a case of selecting ‘cover’ in the image size settings. But this is not proving to be the case.
You can do something similar with CSS in positioning a ‘background image’ inside something if this helps at all.
If you send a share link I could take a look at what you have setup.
From the screenshot, it looks like it is filling the cell correctly so maybe what you want isn’t to cover. The way “object-fit: cover” works is that it resizes the image, with the same aspect ratio, & clips whatever is too large. For example, if an image is too tall to perfectly resize down, it clips the top & bottom of the image & keeps the width.
Is what you want to only show a 300px tall section of the original image, no resizing?
Sure… is the link just a preview of what I am playing around with? The tutorial I am following basically just says this is how to show a ‘portion’ of scaled image. However, this is not showing correctly as based on that vidtut I have sent a link too. I was wondering if there was an alternative movie to this created by the Webflow team … or whether it is just me being a complete newb to Webflow!
No resizing I think or at least… not much as based on the tutorial I am trying to follow. But cant!
Thic could be useful to somebody but I may have a work around. Inside the CSS Grid. I created a ‘Div Block’ and nestled that into a cell. I then added the image as a background. I also selected an image to clip the image image to content. Not sure if this the best way, but it seems to have done the trick for now.
