如何按比例缩放图像并确保它总是占据屏幕的40％

Question

我有一个画布动画，目前使用整个画面，在画布前面，我已经放置了一个图像。当我重新调整窗口宽度的大小时，画布和图像会正确且按比例重新调整尺寸，但是当我的窗口高度发生变化时，画布会重新调整尺寸并使图像从页面上掉落，只留下画布。如何确保图像始终为屏幕高度的40％，或者当窗口高度/宽度发生变化时，图像将始终按比例保持在同一位置？

理想情况下，我希望图像居中，并与屏幕成比例缩放，如果浏览器的高度发生变化则不会完全脱落。

这是img元素的CSS：

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

您可以尝试将图像的最大高度设置为40％

Img {
max-height: 40%;
}