Question

我有一个符号显示在ZxZ px容器中：

.symbol {
 width: 32px;
 height: 32px;
 border: 1px dotted;
 text-align: center; 
}

.symbol>span {
color: darkred;
font-size: 3em;
}

<div>Some Text
<div class="symbol"><span>☎</span></div>
</div>

我想调整font-size总是适合虚线方块，无论Z大小是什么......

请 在重复之前阅读问题！我不需要将它放到视口中，或者以任何方式将问题与响应性，移动平板电脑等相关联。

我只需要一个字母来调整其容器的矩形/ div。

Answer 1

其中一个解决方案是使用JS。

以下是示例：

$(function(){

  var box = $('.symbol');
  var boxWith = box.width();

  $('.symbol span').css('font-size',boxWith);

});

.symbol {
  width: 50px;
  height: 50px;
  border: 1px dotted;
  text-align: center;
  display: flex;
  align-items: center;
}

.symbol>span {
  color: darkred;
  font-size: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Some Text
  <div class="symbol"><span>☎</span></div>
</div>

Answer 2

我需要的东西：

＆＃13;

.a {
width: 25px;
height: 25px;
border: 1px dotted;
}

.b {
width: 200px;
height: 100px;
border: 1px dotted;
color: red;
}

.c {
width: 800px;
height: 800px;
border: 1px dotted;
color: blue;
}

＆＃13;

<div class="a">  
<svg width="100%" height="100%" viewBox="0 -100 100 100">
  <text font-size="138" fill="currentColor" x="50" text-anchor="middle">☯</text>
</svg>
</div>
<div class="b">  
<svg width="100%" height="100%" viewBox="0 -100 100 100">
  <text font-size="138" fill="currentColor" x="50" text-anchor="middle">☯</text>
</svg>
</div>
<div class="c">  
<svg width="100%" height="100%" viewBox="0 -100 100 100">
  <text font-size="138" fill="currentColor" x="50" text-anchor="middle">☯</text>
</svg>
</div>

＆＃13;

JSFiddle here

基于容器的字体大小

2 个答案: