Design comparison
Solution retrospective
I wasn't able to successfully reduce the height of the image. I tried defining height
and max-height
properties in the CSS but it didn't work. Let me know if there are any suggestions for this issue.
Community feedback
- @VimDiesel123Posted 9 months ago
Your solution looks great! Nice work.
As for your question about the height: I dug into it a bit and it's a little complicated but I think it's interesting:
First, when you set a % value for
height
, the value is based off the height of the "containing block" (in this case,.container
). The tricky thing is, by default, the height of an element is based off the height of its content, but changing the height of a child element would change the height of the containing block's content!. So the browser can't know what60%
will actually be!The spec explains what will happen when you set give an element a % height like this:
"If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'."
In other words, setting a %
height
on the child of an element without an explicit height does nothing.The only way it could know what the % will actually resolve to is if the containing block has an explicit height. For example if you had:
.container { height: 1000px; }
But setting explicit heights is likely to cause overflow issues, so you probably shouldn't do that.
Here is a good stack overflow post I read when looking into this.
You can set an explicit max-height on your image, like:
.img { max-height: 120px; }
Or because your image is inside a flex container with
flex-shrink: 1
andflex-basis: 0%
, it will shrink as the size of the container gets too small to fit all of its content.Hope this was interesting. Is was for me!
Good luck!
Marked as helpful0@Shalmali-PatilPosted 9 months ago@VimDiesel123 - thank you for your detailed explanation. The stackoverflow link was useful too. It really is interesting how height and width vary in their behaviors. I will try out the suggestions.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord