Assessment needed for Images Test#1

MDN Learn
1

Challenge: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Images_tasks#task_one
Solution:

img {
  object-fit: cover:
}

the above solution does not scale down the image in the containing box. Any idea where I did wrong?
Thanks,

2

Hi @shivang_trivedi

If you look at the HTML, below, you notice that the img is containedw withing the box.

<div class="box">
  <img src="balloons.jpg" alt="balloons">
</div>

your img needs to know what size it is to take on and this size woudl be whatever the size of the box would be. Note what MDN says

As we learned in our previous lesson, a common technique is to make the max-width of an image 100%. This will enable the image to become smaller in size than the box but not larger. This technique will work with other replaced elements such as <video> s, or <iframe> s.

Note that your img is within a div which has a class of box. Your img needs to be placed within this box which has its own dimensions. This means that you need to set a max-width and max-height as well. I m going to leave it to you to decide what unit these should be so you can figure it out.

Let me know if you have any further questions. Enjoy.

3

Ok, that makes sense. Thanks Ran