根据外部加载的图像保持div大小

Question

这是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都svs在rawV中。 我的问题是，如何让我的svs是大小相同的drgM在任何时候？ 因此，基本上，如果mainGT高度发生变化， drgM和svs应该按比例缩放以保持其长宽比吗？

这是一个包括CSS的小提琴

Answer 1

我有点修改了您的代码，并为.svs和.drgM添加了另一个包装，因为我不确定您希望.rawV如何工作。

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

https://jsfiddle.net/5ppbgxvq/2/

基本上， .resize将根据调整.drgM和.svs将填补大小.rawV给它的大小相同.drgM

Answer 2

这可能接近您的需求。 如果更改.mainG的宽度，则图像和覆盖层（ .svs ）将相应缩放。

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

 .wrapper { border: 1px dotted green; } .mainG { border: 1px solid yellow; width: 400px; } .rawV { border: 1px dotted blue; position: relative; display: inline-block; vertical-align: top; width: 100%; } .drgM img { display: block; width: 100%; } .svs { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 1px dashed red; } 

 <div class="wrapper"> <div class="mainG mainGT"> <div class="rawV"> <div class="svs"></div> <div class="drgM"><img src="http://placehold.it/200x150"></div> </div> </div> </div> 

Answer 3

将drgM和svs的css height都设置为auto 。 将height设置为百分比表示相对于其父元素。