Why is the image going beyond the parent's height?

Question

css

Hello.

Prompt - why the image goes beyond the parent, limited in height?

Example here - https://codepen.io/mytrash/pen/yLbXqOP

I know about

img {
max-width: 100%;
height: auto;
}

I know how to limit the height of this block (set max-height to the image itself, not the parent), but I'm wondering why , in principle , in this case, the image goes beyond the parent block?

Answer 1

Your html image has a fixed width/height.
src="https://via.placeholder.com/728x500"
And yes, you don’t need to fix the height of a dynamic block, the content can crawl out of it.