Design comparison
Solution retrospective
What are the best practices to follow when resizing a styled <img> using {background: url(...)}?
Community feedback
- @correlucasPosted about 2 years ago
Hello @mcddcm, congratulations for you solution!
My advice for you in this challenge is to don't import this image with the css, in a real life project isn't a best practice to import the product photo with the CSS because this will make harder to make your image be found in the search engines, use this kind of a approach for backgrounds, since this is a product use
img
orpicture
inserting them in the html. A good practice to have all the image inside the container scaling and respecting the size of the container, you need to addmax-width: 100%
and add alsoobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%; }
Hope this helps, happy coding
Marked as helpful0@mcddcmPosted about 2 years agoIt will be a bit much to modify the codebase for this challenge. But I've made a note and will make sure I follow this approach in my future projects!
Thanks for the excellent feedback @correlucas !
1 - @NaleekaPosted about 2 years ago
hello @mcddcm 👋
You could use
<h1>
tag instead of<h3>
tag and change it's font-size to fix the accessibility issue.Use media queries to make the component responsive
@media screen and (min-width: 375px;){ .product-card{ width:30vw; } }
hope this was helpfull
happy coding 👋
Marked as helpful0@mcddcmPosted about 2 years agoThanks @Naleeka - I'd definitely have added that media query if I'd followed @coreelucas 's recommendation!
1
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