Image scale to % of screen

I’m running into an issue where I have an image that is too large (and thus runs into my set footer). I would like the image to always be scaled to a certain % of the screen (e.g. image fills 50% of the screen, or 25% of the screen, etc).

I’ve tried using using a parent div with flex display and setting image max-width and max-height (as suggested in but the image just overflows from the box.

Any ideas on how I can make this work in the framework?


do you have a codepen of this?

Since this is just html, it should work with out any issues

Here’s a codepen:

I guess what I expected from setting max-height on the image is that it would have resized to fit the div and not get cut off.

am not sure I really understand you but is this what you want:

I just forked your code and added the background css class

Hi Zaher,

Thanks for the reply. That’s not exactly what I am trying to achieve. The image is still cut off.

What I’m looking for is the image to be scaled down to fit so nothing is cut off (and it would work for whatever screen size). The image height would occupy 50% of the screen so no scrolling would ever be needed.

I think your issue then is that you’re setting both width and height to 100%.

Try only setting the applicable one and leaving the other auto to see if that resolves the issue :smile:

I just tried setting only the height but it didn’t change anything :frowning:

Same problem here … is there a solution for this?

Yes, I finally got it working. Take a look at this codepen:

Is that along the lines of what you were trying to do?