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