Точно вписать глифтон начальной загрузки в DIV, сохраняя отзывчивость

Question

Не знаю, возможно ли это, я перепробовал все, что мог, но безрезультатно. Идея состоит в том, чтобы глификон (или самодельный шрифт) всегда был одинакового размера с DIV. Bootstrap 3.3.7

Вот код: CSS

#insidewrap {
background-color: #FFD;
border: 3px dashed green;
z-index: 2;
padding: 0;
height:400px;
}
.big_box {
width: 60vw;
border: 1px solid red;
float: none;
margin: 0 auto;
}
.icon_size {font-size: 60vw;}

HTML

<div class="container col-md-12">
<div id='insidewrap' class="container">
<div class='big_box text-center'>
<i class='glyphicon glyphicon-qrcode icon_size'></i>
</div>
</div>
</div>

Если я передам размер внутреннему DIV-файлу, он будет выглядеть нормально, когда он на весь экран, а затем, уменьшаясь, глификон теряет контакт с родительским div. CSS? Javascript? Перепробовал всего понемногу. Помощь.

JSFIDDLE ЗДЕСЬ: https://jsfiddle.net/RobDelp/omn9qwz1/

Answer 1

Хорошо, я думаю, что понял, что вы хотите, посмотрев на скрипку. Изменяя размер экрана, я вижу, что глифик и красная рамка входят и выходят за границы зеленой. Итак, если вы хотите, чтобы высота зеленого ящика изменялась в соответствии с размером, установка минимальной высоты для него должна сделать работу:

#insidewrap {
   background-color: #FFD;
   border: 3px dashed green;
   z-index: 2;
   padding: 0;
   /*height:400px;*/
   min-height:1px; /* This is the trick */
}

Когда вы устанавливаете минимальную высоту, браузер будет пытаться отрегулировать высоту элемента до указанного значения, если только не содержится элемент, который имеет большую высоту (например, глифик в вашем примере), в этом случае он в конечном итоге обернуть содержимое, получая высоту его содержимого.

См. Обновленную скрипку: https://jsfiddle.net/omn9qwz1/1/

---

UPDATE:

На основании вашего комментария о том, что значок не отображается .big_box Я думаю, что этот скрипт может вам помочь:

window.onresize = function(){
    var w = $('.big_box').width() - 4;
    $('.icon_size').css({fontSize: w+'px', marginTop: '4px' }); 
};

window.onresize(); //We force it at the beginning

Это заставит значок заполнить родительскую ширину при изменении размера окна браузера.

Скрипка: https://jsfiddle.net/15z3ewfk/1/