Max height not creating intended scaling effect-CodePudding

I'd like images to scale to appropriately fit the screen size. I've tried a few of the expected things, but they've all scaled based on width, and I need something that can scale based on height.

If I use max-width, it works as planned. While if I use max-height, it doesn't seem to do anything.

<img src="https://i.imgur.com/9OPnZNk.png" style="max-width:20%;height:auto;">

<p>The above scales as intended, and is using the max-width property.</p>

<img src="https://i.imgur.com/9OPnZNk.png" style="width:auto;max-height:20%;">

<p>The above doesn't scale as intended, and is using the max-height property.</p>

How can I fix this?

CodePudding user response：

I ran into this issue also and it seems kinda weird sometimes, but if you change max-height:20%; to max-height:20vh;" it works, you scale it then to 20% of the height of the viewport, which gives the same result.

Not a real solution, but a workaround, i hope this helps

CodePudding user response：

Try setting the height of the body to be an absolute (100vh etc.). Otherwise, it will simply scale out based on the body's height, which is set to "auto" by default; thus, it will expand as much as it can for its children to fit.

Since the img is also set to a relative unit (...%) and its parent has also a relative height ("auto") it will simply scale as much as it can (800-pixel units in our case).