让一个 div 响应另一个 div

Question

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

示例： 假设.vgWrapper的宽高为200px， .canvasEl 宽度和高度为 100 像素。 现在 当.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

您的代码存在阻止更改画布大小的问题。

1. 您的.outerWrapper 类有一个固定的width 和height 200px，因此即使调整窗口大小也不会改变。
2. 您的.canvasEl 类占据其容器的宽度和高度的100%，即。 .imgDiv，宽度和高度分别为127px和146px，与.outerWrapper没有任何关系。

为了使它工作，我使用了流畅的布局，即。宽度和高度的百分比。

.outerWrapper{
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    width: 100%; /*when chnaged, .canvasEl should resize accordingly*/
    height: 100%; /*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; 
	left: auto; 
	top: auto; 
	/*width: 127px;*/
	/*height: 146px;*/
	overflow: hidden; 
	position: relative;
}
.imgHolder{
	position: absolute;
}
.imgHolderInner{
	position: relative;
}
.canvasEl{
	position:relative;
    width:50%; /*computed with respect to its container*/
    height: 50%; /* computed with respect to its container*/
    background-color: #f60;
}

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

不需要 javascript 来执行此操作，css 媒体查询就在那里。我检查了你的代码，它取决于宽度.imgDiv。因此，当您进行查询时，您必须使用.imgDiv。您应该更改它的宽度，如果不这样做，它将是.imgDiv 宽度的 100%。 检查这个fiddle

Answer 3

我建议你这样做以避免手动设置媒体查询，假设你很乐意运行一些 Javascript 或 JQuery 来设置高度或为高度等找到更好的 CSS 解决方案。

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

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

我将 outerWrapper 设置为 % 以便在小提琴中很容易看到，只需移动页面分隔线以使其缩放。

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