Skip to content
Submitted almost 3 years ago

Product preview card component

ShyamCanCode•90
@Itachidorri
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

While designing such card components, I use the CSS property 'background-image' to design the image section. Is it best to use it in such cases or shall I opt for using the '<image>' tag in the HTML file? Any suggestions will be greatly appreciated, Hare krishna.

Code

Please log in to post a comment

Log in

Community feedback

  • Gautam Juyal•330
    @gautamjuyal

    In general, using a background-image property for inserting an image require at least some content in the div, and the image may end up being scaled wrong or worst case squeezed or stretched. I think you should use <img> tag for inserting images inside divs, and in order to change the image (/image source) at hover/active states (etc.) or even for different viewports, utilize the content: url(" "); property for the div.

    Marked as helpful
  • Pradeep Saini•990
    @pradeeps4ini

    Hey, Shyam. How are you?

    You've done a great job on implementing the design.

    You should use <img> element, along with a descriptive alt text, for the image. Because the image is not for decorative purpose. This image conveys information.

    You can also use <picture> element to change the image respective to the width of the viewport.

    Marked as helpful

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