Design comparison
SolutionDesign
Solution retrospective
- How to work with img sizing? As the image does not scale like text does, it becomes hard to manage its responsiveness. How to make it so that img also scales relatively?
- As grid layout is pretty much squarish and a non-square image doesn't scale properly, clearly evident from the overlay when the dimensions are changed. How to navigate through this?
Community feedback
- @MikeBish13Posted over 3 years ago
Hey, nice job so far. Seem's like a pretty simple fix to me:
- You also need to set a height on your img so that it fills the container for various screen sizes.
height { 100% }should do the trick. - Then to make the image scale and not distort you can use
object-fit: cover. That should do the trick. More info on object-fit here - https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Hope that helps!
1 - You also need to set a height on your img so that it fills the container for various screen sizes.
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