流体图像根据屏幕尺寸调整尺寸

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">