根據外部加載的圖像保持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設置為百分比表示相對於其父元素。