Search code examples
htmlcssimagemax

Max height not creating intended scaling effect

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?

Solution

  • 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