如何按比例縮放圖像，並確保它總是佔用屏幕的40％

Question

我有一個當前使用整個屏幕的畫布動畫，在畫布前，我放置了一個圖像。當我重新調整窗口寬度的大小時，畫布和圖像將按比例正確重新調整大小，但是當我的窗口的HEIGHT更改時，畫布會重新調整大小，並且圖像會脫離頁面，只留下畫布。我怎樣才能確保圖像始終是屏幕高度的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%; 
}