流體圖像根據屏幕尺寸調整尺寸

Question

我有以下HTML：

<img src="https://www.sporedev.ro/pleiade/images/Maya.jpg" class="full-img">
<img src="https://www.sporedev.ro/pleiade/cufar.png" class="treasure treasure-maya">

以及以下CSS：

.full-img{
    display: block;
    width: 100%;
    height: 100%;
    height: 100vh;  
}
.treasure{
height: 125px;
width:  120px;
} 

.treasure-maya{
    position: absolute; 
    top: 55%; 
    left: 44%;
    z-index: 2;
}

我之所以使用img而不是CSS更為簡單的方法background-image的原因是因為該圖像被用作圖像映射。

這是一個JSFiddle。

這是我正在進行的項目的鏈接。

我嘗試將.treasure圖像調整為.treasure .full-img以便在.full-img縮小尺寸時， .treasure圖像保持其位置和比例。

我設法使用媒體查詢找到了一個解決方案，但這確實適得其反，因為我不得不考慮很多不同的分辨率。 我已經添加了三個媒體查詢，並且只處理了一些我需要考慮的分辨率（大約20個媒體查詢）。

我在Google和SO上尋找問題的解決方案，但找不到答案。

我需要的是使.treasure img和.full-img img一起減小尺寸。

這可以實現嗎？

如果有辦法在CSS中做到這一點，我會更願意。 如果不是這樣，我猜想JS將是唯一的方法，但是不幸的是，我是JS的新手。

Answer 1

使用百分比而不是固定寬度設置圖像寬度。 我已刪除了圖像的高度，因此可以保持比例，但是如果需要，可以更改此比例

例如

 body { padding: 0; margin: 0; } .full-img { display: block; width: 100%; height: 100%; height: 100vh; } .treasure { width: 15%; } .treasure-maya { position: absolute; top: 55%; left: 44%; z-index: 2; } 

 <!-- This is the background image (I can't implement it in the CSS way because I use it together with <map> in my app ) --> <img src="https://www.sporedev.ro/pleiade/images/Maya.jpg" class="full-img"> <!-- This is the image that needs to reduce its height and width, according to the full-img reduction --> <img src="https://www.sporedev.ro/pleiade/cufar.png" class="treasure treasure-maya">