如何按比例缩放图像并确保其始终占据屏幕的40％

Question

I have a canvas animation that currently uses the entire screen, in front of the canvas, I've placed an image. When I re-size the window's width, the canvas and image re-size correctly and proportionally, but when my window's HEIGHT changes, the canvas re-sizes and the image falls off the page, leaving just the canvas. How can I make sure that the image will always be, say, 40% of the screen's height or that when the windows height/width change, the image will always remain in the same place proportionally speaking?

Ideally, I would just like the image to be centered, and to scale proportionally with the screen and not fall off completely if the browser's height changes.

This is the CSS for the img element:

img {
    margin:auto;
    position: fixed;
    top: 200px;
    left: 50%;
    height:auto;
    width:100%;
    text-align:center;
    min-width:1200px;
    max-width:100%;
    transform: translate(-52%, 15%);
}

Answer 1

You could maybe try setting the max height of the image to 40%

Img {
max-height: 40%;
}