Menu
I want text inside my div to remain same size in % percentage ratio to a parent div.
I.E. I want my text to have font-size of 50% of parents div width. So when page size is changing, text always remains the same size in %.
Here Is what I'm talking about:
.counter-holder{
display: block;
position: absolute;
width:90%;
height:20%;
top: 70%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
.counter-element-box{
position:relative;
vertical-align: text-top;
border-style: solid;
border-width: 1px;
width: 20%;
height: 100%;
float:left;
margin: 6%;
}
.counter-element-text{
position:absolute;
top:50%;
width: 50%;
max-width:50%;
display: inline-block;
height:100%;
margin-left:50%;
font-size : 80%;overflow: hidden;
}
.counter-element-value{
position:absolute;
top:50%;
width: 50%;
max-width:50%;
display: inline-block;
height:100%;
padding-left:30%;
font-size : 80%;overflow: hidden;
}<div class="counter-holder">
<div class="counter-element-box">
<div id="years" class="counter-element-value">
0
</div>
<div class="counter-text counter-element-text" >
Years
</div>
</div>
<div class="counter-element-box">
<div id="missions" class="counter-element-value">
0
</div>
<div class="counter-text counter-element-text" >
Missions
</div>
</div>
<div class="counter-element-box">
<div id="team" class="counter-element-value">
0
</div>
<div class="counter-text counter-element-text" >
Team
</div>
</div>
</div>Run this snippet in full screen and try resizing the page and see how text size is changing and not fitting inside the div borders. How can I prevent it from happening, so it always remains inside the borders?
885
font-size: min(3vh,1.7vw); just tweak the proportions according to your font. This works because it takes the shorter side of your viewport as the limiting factor in sizing your font. You can also set this on a parent div and then reference it with em units in its children.
If the font-size you want is 12px , then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px , then specify 0.625em (10/16 = 0.625); for 22px , specify 1.375em (22/16).
It is related to the font size of the parent container. One em (1em) is equal to the current font size. So for example, if the parent element has the font size of 16px than 1em is equal to 16px, 2em is equal to 32px, and so on.
Method 1: First method is to simply assign 100% width and 100% height to the child div so that it will take all available space of the parent div. Consider this HTML for demonstration: HTML.
The way I solved this problem was to use javascript to measure the container and then set the font size in px on that container. Once that baseline is set for the container then the relative font sizing of all the content will scale correctly using em or %.
I'm using React:
<div style={{ fontSize: width / 12 }} > ... </div> CSS:
div { font-size: 2em; } If you talk about responsive scaling, then you can implement it, but all depends on what you are trying to achieve. In the code below i have created a div container with ratio (height/width = 1/2). When you change the size of the browser window, container and text will scale responsively.Depending on the window size it will change the font according to VW(viewport width) and VH(viewport height). To add new font size you have to set it twice once according to the -vw and second time according to -vh. I have used CSS variables(var), that way its easier to understand the code.
Example
body { background-color: #000; padding: 0; margin:0; } /* position element in the middle */ .middle { position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); } /* Ratio: height/width */ :root { --ratio: 0.5; --reverse-ratio: 2; --container-width: 50vw; --container-height: 50vh; --font1-sizeVW: 15vh; --font1-sizeVH: calc(var(--ratio) * 15vw); --font2-sizeVW: 6vh; --font2-sizeVH: calc(var(--ratio) * 6vw); } #container { background-color: pink; width: var(--container-width); height: calc(var(--ratio) * var(--container-width)); max-width: calc(var(--reverse-ratio) * var(--container-height)); max-height: var(--container-height); } #span1 { font-size: var(--font1-sizeVW); } #span2 { font-size: var(--font2-sizeVW); } /* max-width: (reversRatio * 100vh) */ @media all and (max-width: 200vh) { #container { background-color: green; } #span1 { font-size: var(--font1-sizeVH); } #span2 { font-size: var(--font2-sizeVH); } }<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> </style> </head> <body> <div id="container" class="middle"> <span id="span1">Hello</span> <span id="span2">Hello again</span> </div> </body> </html>There's no way to achieve what this question is asking for in CSS. A font size can only be set in a certain number of ways, and any setting that is a percentage value is relative to the size of the font, not a width or height of a block.
So, while this doesn't offer a solution to your problem, it is an answer to the question of whether this can be done in CSS: it can't.
There are a lot of answers here which appear to answer the wrong question, and recommend the use of the vw unit, which is relative to the viewport and not the parent element's size. There are also some which resort to Javascript, which is doable if you don't mind that sort of thing. Then there is slaviboy's answer which advocates the use of CSS user variables which is a creative solution that I admire, even though it can't achieve the end effect asked for by the OP.
In many cases, when you want to set font size relative to the parent element's width, you have enough information to be able to do this with some math: work out how the parent element's width is calculated, and see if you can re-use a calculation like that in your font size setting.
For example, if parent element's width is the viewport width or a known percentage of it, then the answers based on vw will work, you just have to do the math to work out the right ratio. If parent element's width is some absolute value such as 500px, then that's even easier. Only if the parent element's width is completely unpredictable will this be difficult, though presumably the OP's situation is exactly that. For example, if the parent element's width is based on content, and content may be user-submitted or its size is otherwise not predictable.
29
I don't know if that's helpful or not. It's maybe just crap. The idea is to manually take the width of the element and to calculate the font-size from it. I used some JavaScript because I don't know if maths are possible with CSS variables. Code in comment works but is not dynamic.
const resize_ob = new ResizeObserver(function(entries) {
let rect = entries[0].contentRect;
let currWidth = rect.width;
let fontSize = rect.width / 10;
/*
let testDiv = document.querySelector("#test_div");
let testDivStyle = getComputedStyle(testDiv);
let testDivRawWidth = testDivStyle.getPropertyValue('width')
let fontSize = parseInt(testDivRawWidth .substring(0, testDivRawWidth .length - 2)) / 10;
*/
testDiv.style.setProperty('--fontSize', fontSize+"px");
})div {
background-color: lightblue;
height: 75vh;
width: 75vh;
font-size: var(--fontSize, 15vh);
}<div id="test_div">
testing just a thing...
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With