Сделайте 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

Есть проблемы с вашим кодом, которые предотвращают размер холста от изменений.

1. ваш .outerWrapper класс имеет фиксированный width и height из 200px так, что не изменится, даже если окно изменяет размер.
2. ваш класс .canvasEl занимает 100% от ширины и высоты своего контейнера, т.е. .imgDiv, который имеет ширину и высоту 127 пикселей и 146 пикселей соответственно и никак не связан с .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{ 
 
\t position: relative; 
 
    \t display: inline-block; 
 
    \t vertical-align: top; 
 
    \t width: 100%; 
 
    height: 100%; 
 
} 
 
.imgWrapper{ 
 
\t position: absolute; 
 
    \t left: 0; 
 
    \t right: 0; 
 
    \t top: 0; 
 
    \t bottom: 0; 
 
} 
 
.bgWrapper{ 
 
\t display: block; 
 
\t height: 100%; 
 
    width: 100%; 
 
} 
 
.imgDiv{ 
 
\t margin: 0px; 
 
\t left: auto; 
 
\t top: auto; 
 
\t /*width: 127px;*/ 
 
\t /*height: 146px;*/ 
 
\t overflow: hidden; 
 
\t position: relative; 
 
} 
 
.imgHolder{ 
 
\t position: absolute; 
 
} 
 
.imgHolderInner{ 
 
\t position: relative; 
 
} 
 
.canvasEl{ 
 
\t position:relative; 
 
    width:50%; /*computed with respect to its container*/ 
 
    height: 50%; /* computed with respect to its container*/ 
 
    background-color: #f60; 
 
}

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

Answer 2

Не нужно JavaScript, чтобы сделать это, CSS медиазапросы есть для вас. Я проверяю ваш код и зависит от ширины .imgDiv. Поэтому, когда вы выполняете свои запросы, вы должны работать на .imgDiv. Вы должны изменить его ширину, если этого не сделать, это будет 100% от .imgDiv ширины. Проверьте это fiddle

Answer 3

Я хотел бы предложить собираюсь что-то вроде этого, чтобы избежать ручной настройки медиа-запросов, при условии, что вы счастливы запустить некоторые JavaScript, или JQuery, чтобы установить высоту или найти лучшее решение CSS для высоты и т.д.

Ширина проста, и вам не нужно возиться с позиционированием, если я правильно понимаю ваши требования, см. Эту обновленную скрипку. https://jsfiddle.net/umoyhzjv/2/

Я просто установил оболочку холста на 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; 
}