Design comparison
Solution retrospective
I got to learn about grid-template-areas and object-position properties.Initially i didnt know about them.
What specific areas of your project would you like help with?Placing of the images in the grid containers .Somehow we were required to crop the images and i had to place them absolutely and hide the overflow.Technically i struggled with that and even on screen size one of the images is still out of the page flow.I would like assistance on that ..I had issues with placing the images.
Community feedback
- @khatri2002Posted 4 days ago
Your approach is on the right track! When working with images in a grid container, here’s a simple method that might help:
-
Position the image (child of the grid item) as absolute. This allows you to freely place the image within its parent container (the grid item).
-
Set the parent container (grid item) to position: relative. This makes sure the image is positioned relative to its parent, not the entire page.
-
Adjust the top, right, bottom, and left properties of the image to fit it exactly where you want it inside the container. For example, you can center it, crop it, or align it to specific edges.
-
Make the parent container’s overflow property hidden. This ensures that any part of the image outside the container is not visible.
-
Handle responsive design: At smaller screen sizes, if you need to display the full image, you can change the image’s position to relative or static so it flows naturally with the content.
Remember, this is just one way to do it! Depending on your design, you could also explore using object-fit on the image or CSS properties like clip-path. Keep experimenting and find what works best for your specific use case!
0 -
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord