[英]Maintaining div size based on an image loaded externally
This is the div structure: 这是div结构:
<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
. 我正在将外部图像加载到drgM
。 Now I need div svs
to be same size as drgM
(height and width). 现在我需要的div svs
是同样大小drgM
(高度和宽度)。 So I wrapped both drgM
and svs
inside rawV. 因此,我将drgM
和svs
都svs
在rawV中。 My question is, how do I make the svs
to be the same size as drgM
at all times? 我的问题是,如何让我的svs
是大小相同的drgM
在任何时候? So basically if mainGT
height is changed, drgM
and svs
should scale proportionately maintaining their aspect ratio? 因此,基本上,如果mainGT
高度发生变化, drgM
和svs
应该按比例缩放以保持其长宽比吗?
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. 我有点修改了您的代码,并为.svs和.drgM添加了另一个包装,因为我不确定您希望.rawV如何工作。
<div class="rawV">
<div class="resize">
<div class="svs"></div>
<div class ="drgM"></div>
</div>
</div>
https://jsfiddle.net/5ppbgxvq/2/ 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
基本上, .resize
将根据调整.drgM
和.svs
将填补大小.rawV
给它的大小相同.drgM
This might be close to what you need. 这可能接近您的需求。 If you change the width of .mainG
the image and overlay ( .svs
) will scale accordingly. 如果更改.mainG
的宽度,则图像和覆盖层( .svs
)将相应缩放。
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>
Set the css height
for both drgM
and svs
as auto
. 将drgM
和svs
的css height
都设置为auto
。 Setting the height
as a percentage means it is relative to its parent element. 将height
设置为百分比表示相对于其父元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.