TASK GOAL: you have an image that is overflowing the box. We want the image to scale down to fit inside the box without any extra white space, but we do not mind if some part of the image is cropped
FORMAL SOLUTION:
img {
height: 100%;
width: 100%;
object-fit: cover;
}
my original answer
img {
object-fit: cover;
}
Q1: why is the code below so important? what’s the meaning of the code actually?
height: 100%;
width: 100%;
Q2: we have already learned similar things in the background section. what’s the difference between
object-fit: cover
and
background-size: cover
Hello @Austin_Hart
height: 100%; // set the height of the element(the img in our case) to be 100% of it's actule size
width: 100%; // set the width of the element(the img in our case) to be 100% of it's actule size
and for the object-fit
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
but background-size: cover
Scales the image as large as possible to fill the container, stretching the image if necessary. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
the first one target the element itself but the second target the background image also notice the difference of the behavior between both of them
when you need extra info about an element or property go to https://developer.mozilla.org/ and search for it and you will very good info and with example that help you understand it in much better way
hope that help and have a nice day 
1 Like