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包含在rawV中。我的问题是，如何让svs始终与drgM的尺寸相同？所以基本上如果mainGT高度发生变化，drgM和svs应按比例缩放以保持其宽高比？

这是Fiddle，包括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）会相应缩放。

可以通过改变高度来扩展，让我知道这是否至关重要。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

根据外部加载的图像维护div大小

3 个答案: