使div响应另一个div-Makeadivresponsivetoanotherdiv

I would suggest going for something like this to avoid manually setting media queries, assuming you are happy to run some Javascript or JQuery to set the height or find a better CSS solution for height etc.

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

Width is simple and you don't need to mess with the positioning, assuming I understand your requirements correctly, please see this updated fiddle. https://jsfiddle.net/umoyhzjv/2/

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

I have simply set the canvas wrapper to 50% width and set the height as half the parents height. You can add $(window).resize() to trigger the code to re-run if this is intended to be interactive etc.

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

I set the outerWrapper to be % so it is easy to see in the fiddle, just move the page divider to make it scale.

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

Not need Javascript to do this, css media queries is there for you. I check your code and it depends on the width .imgDiv. So when you do your queries, you must work on .imgDiv. You should change its width, if do not do this, it will be 100% of .imgDiv width. Check this fiddle

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

There are issues with your code that prevent the canvas size from being changed.

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

1. your .outerWrapper class has a fixed width and height of 200px so that will not change even if the window is resized.

你的.outerWrapper类具有200px的固定宽度和高度,因此即使调整窗口大小也不会改变。

2. your .canvasEl class occupies 100% of the width and height of its container ie. .imgDiv, which has a width and height of 127px and 146px respectively and is no way related to .outerWrapper.

你的.canvasEl类占据其容器宽度和高度的100%即。 .imgDiv,其宽度和高度分别为127px和146px,与.outerWrapper无关。

In order to make it work I have used fluid layout ie. width and height in percentages.

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

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

	

		

			

				

					

                         // should resize propotionaltely when .vgWrapper size is chnaged