Html 使一个div响应另一个div

我有下面的div结构。如何使

.canvasEl

响应

.vgwraper

例如： 假设

.vgwraper

宽度和高度为200px， 画布的宽度和高度为100px。 全国妇女组织 当

.vgwraper

的宽度和高度更改为100px时，

.canvasEl

宽度和高度应为50px

因此，

.canvasEl

的大小应根据

.vgwraper

的大小自动改变。这是一个

//当更改.vgwraper大小时，应按比例调整大小

您的代码存在问题，无法更改画布大小

您的

.outerrapper

类的

宽度和
高度固定为
200px
，因此即使调整窗口大小，也不会改变

您的

.canvasEl

类占据其容器宽度和高度的100%，即

.imgDiv

，其宽度和高度分别为127px和146px，与

.outerrapper

没有任何关联

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

.outerWrapper{
左：0；
右：0；
保证金：0自动；
位置：绝对位置；
宽度：100%；/*更改时，.canvasEl应相应调整大小*/
高度：100%；/*更改时，.canvasEl应相应调整大小*/
背景色：石灰；
}
.vgWrapper{
位置：相对位置；
显示：内联块；
垂直对齐：顶部；
宽度：100%；
身高：100%；
}
伊姆格瓦珀先生{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
}
.bgWrapper{
显示：块；
身高：100%；
宽度：100%；
}
伊姆格迪夫先生{
边际：0px；
左：自动；
顶部：自动；
/*宽度：127px*/
/*高度：146px*/
溢出：隐藏；
位置：相对位置；
}
伊姆戈尔德先生{
位置：绝对位置；
}
伊姆戈德林纳先生{
位置：相对位置；
}
canvasEl先生{
位置：相对位置；
宽度：50%；/*根据其容器计算*/
高度：50%；/*根据其容器计算*/
背景色：#f60；
}

//当更改.vgwraper大小时，应按比例调整大小

不需要javascript来完成这项工作，css媒体查询已经为您准备好了。我检查您的代码，它取决于宽度

.imgDiv

。因此，当您进行查询时，必须使用

.imgDiv

。您应该更改它的宽度，如果不这样做，它将是

.imgDiv

宽度的100%。

---

选中此项，我建议您使用类似的方法来避免手动设置媒体查询，前提是您愿意运行一些Javascript或JQuery来设置高度，或者找到更好的CSS高度解决方案等

宽度是简单的，你们不需要搞乱定位，假设我正确理解你们的要求，请看这个更新的小提琴

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

我将外套的比例设置为%，这样很容易在小提琴中看到，只需移动分页符即可缩放

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

---

可以通过媒体查询手动执行，也可以使用基于百分比的宽度和高度（必要时使用一点javascript帮助调整高度）？“你试过什么了？”约翰·德普罗斯，谢谢。我试着使用固定到父div（

outerWrapper

）并使用fiddle中的相对位置和绝对位置。但是没有成功。我玩了小提琴，在Bekithanks上发布了一个建议的解决方案。为什么不能对

imgDiv

进行缩放？并且有100%的时间来

游说

？对不起，我不明白，你能详细说明一下吗？你现在试的是什么？谢谢。你说的是对的。我试着让父母100%了解“imgDiv”的高度和宽度，但没能让它正常工作。我现在就在这里。使用基于%的值应该可以消除通过媒体查询手动设置内容的需要。：）看起来不错。让我试着把你的建议融入到我的代码中，看看它是如何进行的。这应该是最干净的，就是在没有混乱的媒体查询或立场的情况下重新产生你的想法：绝对。@Beki，你进展如何，更近了吗？

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