html - 使一个 div 响应另一个 div

Question

我有下面的 div 结构。如何让 .canvasEl 响应 .vgWrapper？

例子:假设 .vgWrapper 宽度和高度为 200px，.canvasEl 宽度和高度为 100px。现在当.vgWrapper的宽高改为100px时，.canvasEl的宽高应该是50px。

所以 .canvasEl 的大小应该根据 .vgWrapper 的大小自动改变。这是一个Fiddle

<div class="outerWrapper">
    <div class="vgWrapper">
        <div class="imgWrapper">
            <div class="imgHolder">
                <div class="imgHolderInner">
                    <div class="imgDiv">
                        <canvas class="canvasEl"></canvas> // should resize propotionaltely when .vgWrapper size is chnaged 
                    </div>
                </div>
            </div>
        </div>
        <div class="bgWrapper">
        </div>
    </div>
</div>

Answer 1

我建议采用类似的方法来避免手动设置媒体查询，前提是您乐于运行一些 Javascript 或 JQuery 来设置高度或找到更好的 CSS 高度解决方案等。

宽度很简单，你不需要弄乱定位，假设我正确理解你的要求，请参阅这个更新的 fiddle 。 https://jsfiddle.net/umoyhzjv/2/

我只是将 canvas wrapper 设置为 50% 宽度并将高度设置为父项高度的一半。如果这是为了交互等，您可以添加 $(window).resize() 来触发代码重新运行。

我将 outerWrapper 设置为 %，因此在 fiddle 中很容易看到，只需移动页面分隔线即可缩放。

.outerWrapper{
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    width: 50%; /*when chnaged, .canvasEl should resize accordingly*/
    height: 50%; /*when chnaged, .canvasEl should resize accordingly*/
    background-color: lime;
}
.vgWrapper{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
}
.imgWrapper{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.bgWrapper{
    display: block;
    height: 100%;
    width: 100%;
}
.imgDiv{
    margin: 0px; 
    width: 50%; 
    height: 50%; 
    overflow: hidden; 
}
.canvasEl{
    position:relative;
    width:100%;
    height: 100%;
    background-color: #f60;
}