Javascript 基于外部加载的图像保持div大小

这是div结构：

<div id="wrapper">
    <div class="mainG mainGT">
        <div class="rawV">
            <div class="svs"></div>
            <div class="drgM"></div>
        </div>
    </div>
</div>

我正在将外部图像加载到

drgM

。现在我需要div

svs

与

drgM

的大小相同（高度和宽度）。因此，我将

drgM

和

svs

都包装在rawV中。我的问题是，如何使

svs

始终与

drgM

大小相同？因此，基本上，如果

mainGT

高度发生变化，

drgM

和

svs

应按比例缩放，以保持其纵横比

---

下面是一个包含css的示例，将

drgM

和

svs

的css

高度设置为
auto
。
将
高度
设置为百分比意味着它相对于其父元素。
我稍微修改了您的代码，并为.svs和.drgM添加了另一个包装，因为我不确定您希望.rawV如何工作

<div class="rawV">
        <div class="resize">
            <div class="svs"></div>
        <div class ="drgM"></div>
    </div>
</div>




基本上，
.resize
将根据
调整大小。drgM
和
.svs
将填充
的大小。rawV
使其与
的大小相同。drgM
这可能接近您需要的大小。如果更改
.mainG
的宽度，图像和覆盖（
.svs
）将相应缩放

可以通过改变高度来缩放，如果这很关键，请告诉我


.wrapper{
边框：1px点绿色；
}
梅因先生{
边框：1px纯黄色；
宽度：400px；
}
罗夫先生{
边框：1px点蓝色；
位置：相对位置；
显示：内联块；
垂直对齐：顶部；
宽度：100%；
}
.drgM img{
显示：块；
宽度：100%；
}
.svs{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
边框：1px红色虚线；
}

是否希望
div.svs
重叠
div.drgM
，如中所示，一个叠在另一个上，就像重叠一样？@MarcAudet。谢谢是的，我希望它们重叠。谢谢。但是宽度呢？
svs
如何将其宽度设置为与
drgM
相同的大小？谢谢。但是当我更改
mainGT
的高度时，
drgM
和
svs
不会改变它们的大小。试试这个：我删除了额外的元素，再次使用了
rawV
，只使用了百分比，这样
。drgM
在
mainGT
调整大小时会调整大小。谢谢。。这也行。我发现马克·奥德特的答案更准确+10还有一件事，如果我将内联svg加载到
drgM
中，它的工作原理是否与img相同？如果svg具有内在维度，那么它的行为应该类似于图像。我不能保证，但请尝试一下，让我知道它是否有效。