Stats component using html/css

Community feedback

• 

  Sergio Reynoso•320

  @sergioreynoso

  Posted about 3 years ago

  Nice job! I notice the <img> is not taking the whole height of its container. This is because the <img> tag only has it's width at 100%, you want to also do its height. Of course this would then then stretch it and distort it; this is where the object-fit property comes to the rescue by setting it to cover.

  img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  

  A challenge for you is to pretend this was as component that would take any kind of image without the purple overlay added to it. How would you add the color overlay with just css? ;-)

  Cheers!

  02

  Marked as helpful