Question

我不知道是否有可能，我已尽力而为，但无济于事。这个想法是让glyphicon（或自制字体）始终与包含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大小，当它全屏时它看起来没问题，然后，下降，glyphicon失去与父div的联系。 CSS？ JavaScript的？尝试了一切。帮助

JSFIDDLE HERE：https://jsfiddle.net/RobDelp/omn9qwz1/

Answer 1

好吧，我想通过看小提琴我理解你想要的东西。通过调整屏幕大小，我看到glyphicon和红色框进出绿色边界。所以，如果你想要绿色框的高度相应调整大小，设置它的最小高度应该做的工作：

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

当您设置最小高度时，浏览器将尝试将元素的高度调整为指定值，除非包含的元素具有更高的高度（如示例中的glyphicon），在这种情况下，它将最终包装内容，从而获得其内容的高度。

请参阅更新的小提琴：https://jsfiddle.net/omn9qwz1/1/

<强>更新

根据您对不在.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/

在DIV中完全适合bootstrap glyphicon，保持响应特性

1 个答案: