Question

我有以下div结构。如何让.canvasEl对.vgWrapper做出回应？

例如：假设.vgWrapper宽度＆amp;身高是200px，和.canvasEl宽度＆amp;高度是100px。现在当宽度＆amp; .vgWrapper的高度更改为100px，.canvasEl宽度＆amp;身高应该是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

您的代码存在一些问题，导致无法更改画布大小。

您的.outerWrapper课程具有固定的width和height 200px，因此即使调整窗口大小也不会改变。
您的.canvasEl类占据其容器宽度和高度的100％即。 .imgDiv，其宽度和高度分别为127px和146px，与.outerWrapper无关。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

使div响应另一个div

3 个答案: