Design comparison
Solution retrospective
for working on this platform it is such an honor
What challenges did you encounter, and how did you overcome them?the blog preview card
What specific areas of your project would you like help with?image inside div ratio how i could fit the size
Community feedback
- @pamplitoPosted 8 months ago
Hello,
Your blog preview card looks great. Congratulations! As a beginner, I'm not sure if it's the best method, but I use "object-fit" to manage the image size in a responsive way.
All the best !
Marked as helpful0 - @Glorit74Posted 8 months ago
I use this setup and it usually gives the expected result The images are enclosed in a div (for example img_container) .img-container { width: 100%; border-radius: 15px; overflow: hidden; /* it hides the corners / } img { width: 100%; / image fills the container div, it takes on the largest possible size / dispaly: block; / remove default margin-bottom / object-fit: cover; / keeps aspect ratio */ } Always write something in the alt tag, everyone always complains about it. :-)
There is a typo in line 59 (style.css) font-weight: 1rem; instead of font-weight: 400; You can easily find such errors in the browser inspector
0 - @Glorit74Posted 8 months ago
I use this setup and it usually gives the expected result The images are enclosed in a div (for example img_container)
.img-container { width: 100%; border-radius: 15px; overflow: hidden; /* it hides the corners */ } img { width: 100%; /* image fills the container div, it takes on the largest possible size */ dispaly: block; /* remove default margin-bottom */ object-fit: cover; /* keeps aspect ratio */ }
Always write something in the alt tag, everyone always complains about it. :-)
There is a typo in line 59 (style.css) font-weight: 1rem; instead of font-weight: 400; You can easily find such errors in the browser inspector
0
Please log in to post a comment
Log in with GitHubJoin 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