完全适合 DIV 中的 bootstrap 字形，保持响应质量

Question

不知道可不可以，我试了各种方法都没有用。这个想法是让一个字形（或自制字体）始终与包含 DIV 的大小相同。 Bootstrap3.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>

如果我给 insidewrap 指定大小 DIV，它在全屏时看起来还不错，然后向下移动，glyphicon 失去与父级的联系 div。 CSS？ Javascript？什么都试了一点。帮助。

JSFIDDLE 在这里：https://jsfiddle.net/RobDelp/omn9qwz1/

Answer 1

好的，我想我通过查看 fiddle 了解您想要什么。通过调整屏幕大小，我看到字形图标和红色框进出绿色框的边界。所以，如果你想让绿框的高度相应地调整大小，设置一个最小高度就可以了：

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

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

查看更新后的 fiddle：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

当浏览器 window 调整大小时，这将使图标填充其父宽度。

Fiddle: https://jsfiddle.net/15z3ewfk/1/

完全适合 DIV 中的 bootstrap 字形，保持响应质量

Fit exactly bootstrap glyphicon in DIV, keeping responsive qualities

html

javascript

css

glyphicons

twitter-bootstrap-3