taavi80• 370
@taavi80
Posted
Hi,
The most commonly used solution is to change the display property of the <img> tag from default ‘inline‘ value to ‘block‘ using display : block property.
Marked as helpful
0
Design comparison
Solution retrospective
Hi,
Does anyone have any insight into how I get the bottom border of the image lined up with the container when in desktop mode? I've been struggling with this, setting padding and margins throughout the whole thing. Thanks in advance for any assistance.
Community feedback
Alex• 110
@aadler91
Posted
Hi,
your solution looks very good :-)
I had this problem just a couple of hours ago, as I did this challenge. I added the following css to the image: width: 100%; height: 100%; object-fit: cover;
Than the image covers the entire box without getting distorted. I found this resource helpful in understanding that principle: https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/Fill_a_box_with_an_image
Hope this will help you!
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