How to make image fit into the image container

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hello Ted, congratulations for your new solution!

  Answering your question:

  All you need to do is to add background-size: contain to make the image takes the full width and background-repeat: no-repeat to avoid the svg image repeating. Doing that you'll have the correct size and alignment to the card center.

  Hope this helps, happy 👏

  Marked as helpful

  0

  ---

  

  Ted Thomas•60

  @TeddynessPosted about 2 years ago

  @correlucas

  Hi Lucas,

  Thank you for your feed back, I'll definitely implement this method in my next attempt.

  1
• 

  monk-e-man•70

  @NairityaPosted about 2 years ago

  Hi Ted,

  Congratulations 🎉 for completing this challenge, the card component looks great. Here's a solution on how you can make sure that the Image is fits into the image container :

  1 ) Firstly remove the <p> tag which you have inside your <div class="img-container"> 2 ) Give both <div class="img-container"> and <div class="cont-2"> a max-width and it must be same. 3) Then give your img element these properties:

    object-fit: cover;
    width: 100%;
  

  I hope this helped you. Happy Coding :) Keep Working Hard!!

  Marked as helpful

  0

  ---

  

  Ted Thomas•60

  @TeddynessPosted about 2 years ago

  @Nairitya

  Hi Nairitya,

  Thank you for your feedback, I'll definitely implement the solutions provided by you and other members from the community.

  0