Javascript 流体图像根据屏幕大小调整大小

我有以下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">

我之所以使用

img

而不是CSS更简单的方法

background image

，是因为图像被用作图像映射

我尝试将

.treasure

图像调整为

.full img

，这样，当

.full img

缩小时，

.treasure

图像保持其位置和比例

我设法找到了一个解决方案，使用了媒体查询，但这确实适得其反，因为我必须考虑很多不同的分辨率。我已经添加了三个媒体查询，这只考虑了我需要考虑的一些解决方案（大约20个媒体查询）

我在谷歌上寻找我的问题的解决方案，但我找不到答案

我需要的是，以某种方式使

珍藏img

与

完整img

一起缩小尺寸

这是可以实现的吗

---

如果有一种方法可以在CSS中实现这一点，我更愿意这样做。如果不是，我想JS将是唯一的方法，但不幸的是，对于JS，我是一个新手

使用百分比而不是固定宽度设置图像宽度。我已经删除了图像的高度，所以比率保持不变，但如果需要，您可以更改它

比如说

正文{
填充：0；
保证金：0；
}
.完整图像{
显示：块；
宽度：100%；
身高：100%；
高度：100vh；
}
.宝藏{
宽度：15%；
}
.珍宝玛雅{
位置：绝对位置；
最高：55%；
左：44%；
z指数：2；
}

为什么不使用百分比（%）来设置宝藏图像的宽度？另外，主图像在调整大小时没有保持其比例，因为这会将其拉伸到整个屏幕，与我想要的完全相反。为什么它会将其拉伸到整个屏幕？你的图像是绝对定位的，它会保持在现在的位置，除了宽度是百分比而不是固定宽度，因为百分比的工作方式。它将尝试适应100%的屏幕。请打开我在问题中链接的JSFIDLE，尝试将珍宝类的高度和宽度设置为100%，您将看到结果。我从未说过要将其设置为100%，我不明白您为什么要将其设置为100%，这没有任何意义。只要把它设为15%或类似的值。在我评论之前我已经试过了。你不认为如果你在没有设置“自动”的情况下同时强制宽度和高度，图像可能会恶化吗？对于主图像？是的，它不会保留图像比例，但OP就是这样拥有它的，我想这是有原因的

.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;
}