Maintaining div size based on an image loaded externally

Question

This is the div structure:

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

I'm loading an external image into drgM . Now I need div svs to be same size as drgM (height and width). So I wrapped both drgM and svs inside rawV. My question is, how do I make the svs to be the same size as drgM at all times? So basically if mainGT height is changed, drgM and svs should scale proportionately maintaining their aspect ratio?

Here is a Fiddle including the css

Answer 1

I modified your code a bit and added another wrapper for .svs and .drgM since I'm not sure how you want .rawV to work.

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

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

Basically, .resize will resize depending on .drgM and .svs will fill the size of .rawV giving it the same size as .drgM

Answer 2

This might be close to what you need. If you change the width of .mainG the image and overlay ( .svs ) will scale accordingly.

It might be possible to scale by changing the height, let me know if that is critical.

 .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

Set the css height for both drgM and svs as auto . Setting the height as a percentage means it is relative to its parent element.