html - 如何按比例缩放图像并确保它始终占据屏幕的 40%

Question

我有一个当前使用整个屏幕的 Canvas 动画，在 Canvas 前面，我放置了一个图像。当我重新调整窗口的宽度时， Canvas 和图像会按比例正确调整大小，但是当我的窗口的高度发生变化时， Canvas 会重新调整大小并且图像从页面上掉下来，只留下 Canvas 。我怎样才能确保图像始终是屏幕高度的 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%;
}