Need help with task 1 of Images and Form elements skill test

Hello,

I’m having a hard time wrapping my head around the solution of task 1 of the below skill test:

I actually have many questions.

Why is setting overflow to hidden not working with the image?

Why is setting object-fit to cover alone not enough? Why do I have to also set height and width to 100%?

Why is setting object-fit to cover after setting only height to 100% (without width) not causing the image to cover the box?

Thanks a lot for your response in advance.

1 Like

Hi @mabouguerra!

Some answers for you:

  1. overflow: hidden won’t work because you can’t change the size of an element using it — the image is as big as it is; what you want to do is stop the image content overflowing the parent <div>. If you set overflow: hidden on the parent <div>, it will take effect.
  2. You have to set width and height to 100% as well because object-fit doesn’t affect the size of the <img> tag — it only affects how the image is shown inside the <img> tag — cover for example makes the image maintain its intrinsic aspect ratio, and be displayed large enough so that it covers the entire size of the <img> tag. So initially, the image is being shown at full size anyway, so object-fit will make no difference. When you set the <img> to be as big as its surrounding container, it is then smaller than the intrinsic image size, so it display is then adjusted according to which object-fit value you set.
  3. If you only set the <img> height to 100%, the width dimension is automatically adjusted to a value so that the image will maintain its intrinsic aspect ratio. but then the width is smaller than 100%. It then fits inside the <img> tag, and object-fit works by giving the image its intrinsic aspect ratio when it doesnt have it, so it won’t do anything.

This is my understanding, anyway. This is quite tricky stuff, and it is interesting and useful to question why this behavior is occuring.

8 Likes

thanks for both of you for the question and the answer
@chrisdavidmills @mabouguerra

have a nice day :slight_smile:

2 Likes

Thanks a lot for the detailed answers @chrisdavidmills, and by the way, big thanks as well for the entire front-end learning path, It helped me fill tons and tons of gaps in my knowledge and, as a result, I feel a lot more confident with my understanding of the basics. It is easily the best resource there is.

@mabouguerra thanks so much for the kind words! This is the kinda thing that makes it all worth doing, and I’m so happy you are finding it helpful.

Thank you for explaining. I find that knowing which rule applies to parent which to child is helpful.