Maintain image proportions when using both px & vh

I Need Help
1

I know Blocs maintains image proportions when I set only the Height or the Width, regardless of whether the units are px, % or vh. But when I mix px units and vh, image proportions are not maintained.

Here’s what I want to do. I have an image that I want to set to a fixed pixel size normally: 572px high:

image

Doing that works great. No problems. BUT, I now want to make sure that image is no taller than the display height. (For example, if I rotate my iPhone to landscape, I don’t want the top and bottom of my image to be out of view. I want the whole image in view.) To do that seems easy, I just add Max 80vh:

image

The problem is that when I view my page in anything below LG or on small screens, my image gets smashed (proportions are not maintained).

Yes, I know I can maintain proportions by also adding a Max vw size, but since the dimensions of every device display is different, it’s impossible to choose a vw size.

Hence, I cannot figure out how to set an initial pixel size (in my case, Height) while also establishing a way to keep the image from being partially cut off on small screens. I need to set an initial pixel size because my image would be too large in LG otherwise.

Any ideas would be appreciated.

Thanks.

2

You can add a height for each cut point with a single custom class. No problem with that, without using a “max”, you can use 572 pixels, then change LG to 500 pixels, all in the same class, and for each custom point.

3

I assume you define “cut point” = “custom point” = “breakpoint”? (i.e., LG, MD, etc.)

I am already using a custom class applied to my image, screenshots of which I show in my opening post.

I don’t understand what you are proposing as a solution. If you are simply saying “change the Height field px value per breakpoint,” then such is not a solution because it does not take into account the display height, which is what vh does. But my opening post already explains the issues with using vh. And if you are suggesting I delete the Height field and use the same px value only in the Max field, that will look fine only in LG and overshoot the right side of the page on MD and below.