Font size based on container

Question

I have a Symbol to display in a ZxZ px container:

.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>

I would like to adjust the font-size always to fit the dotted square, whatever the Z size is...

Please read the question before making it duplicate! I don't need to fit it to viewport, or in any way the question is linked with responsiveness, mobile tablets etc.

I just need a letter to adjust to its container's rectangle/div.

I don't think so it's possible with font. You can do this with `background-image` and `background-size: cover` — Sylwek, Nov 15 '17 at 10:57
Possible duplicate of [Font scaling based on width of container](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) — roberrrt-s, Nov 15 '17 at 11:00
@Roberrrt Nothing to do with any viewport or mobile. Already saw, I need a symbol to fit its rectangle depending entirely of the container's rectangle size. — serge, Nov 15 '17 at 13:43

Zvezdas1989 · Answer 1 · 2017-11-15T11:10:59.560

1

One of the solutions is to use JS.

Here is example:

$(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>

edited Nov 15 '17 at 11:10

answered Nov 15 '17 at 11:03

Zvezdas1989

1,445
2
16
34

It's bad solution. phone is always bigger ten box when you set same font-size as widht of box – Sylwek Nov 15 '17 at 11:07
I made it as it was with his code I could adjust to fit the box but I think he can do it himself – Zvezdas1989 Nov 15 '17 at 11:08
It's not. The phone has always bigger width than the box (chrome browser) – Sylwek Nov 15 '17 at 11:13
@Sylwek it looks fine when I run the snippet. Check this JSBin http://jsbin.com/nomadavawa/edit?html,css,js,output Just run it with JS – Zvezdas1989 Nov 15 '17 at 11:49
Why on Earth someone speaking about a phone in this thread? So, no way without JS? – serge Nov 15 '17 at 13:45
@Serge Actually there is workaround with CSS but JS solution is much more reliable in my opinion and it has better browser support. By the way I was also annoyed with phone thing but I fixed it anyway .... – Zvezdas1989 Nov 15 '17 at 13:46
ah, sorry, a thought it was about a CSS display on a phablet/phone :) is about the phone picture! )) – serge Nov 15 '17 at 13:51
@Serge that's why I said it was annoying who cares about that :) – Zvezdas1989 Nov 15 '17 at 14:03
found an answer based on one of the "duplicate" answers, transformed a little. Thanks for your solution, is fits very good for the people who would like to add some JS – serge Nov 15 '17 at 16:19
@Serge No problem happy to help, I still you will have better browser support with JS :) – Zvezdas1989 Nov 15 '17 at 18:58

serge · Answer 2 · 2017-11-15T16:14:36.797

Something I need:

.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;
}

<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>

the JSFiddle here

Font size based on container

2 Answers2