How would I scale div content with its size using Javascript?
Question
I have a div that is centered on the page and scales with viewport in a way that its aspect ratio (16:9) is maintained. The problem is, I want the font and content inside to scale with the div as it resizes, as well. Vmin works, for the most part, without issue. It would work perfectly if the aspect ratio of the div is 1:1 because vmin checks for the lesser value between height and width of the viewport directly, and you can't set a custom aspect ratio.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:white;
}
.wrapper {
width: 95vw;
height: calc(95vw * 9/16);
max-height: 95vh;
max-width: calc(95vh * 16/9);
background: center;
background-color: blue;
background-size:contain;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#lorem {
color: aqua;
font-size:10vmin;
text-align:center;
position:absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
margin:auto;
}
</style>
</head>
<body>
<div class="wrapper">
<p id="lorem">
This text should scale with div only.
</p>
</div>
</body>
</html>
https://jsfiddle.net/Addictorator/70fq44sv/2/
Resize the window vertically to see what I'm talking about.
I don't believe there is a way in pure css (but if there is, that would be most preferred), but I think it is possible in javascript using an event listener onresize of the div and scaling each element down separately by a ratio comparing original (or previous - storing it as a var) div height/width to current div height/width. Or it could try and replicate vmin behavior but with height set to a ratio in a way 16:9 is considered instead of 1:1, like what was done on div using css above. I would prefer pure js and no jquery if at all possible. I've tried doing this myself, but I'm rather amateurish when it comes to javascript.
Thanks in advance!
1 answers
solution1
1 ACCPTED 2017-01-01 13:40:10
Please see a working codepen here .
The solution is quite simple. On window resize we return the clientHeight of the parent. by dividing the returned value we achieve an integer that is usable as a font-size . We then assign this to the p element.
I hope this solves your problem.
//assigns font-size when document is ready document.onreadystatechange = () => { if (document.readyState === 'complete') { var wrapperHeight = document.getElementById('wrapper').clientHeight; var relativeFontSize = wrapperHeight / 10 + 'px'; //change 10 to any integer for desired font size document.getElementById("lorem").style.fontSize = relativeFontSize; } }; //then on window resize window.onresize = function(event) { var wrapperHeight = document.getElementById('wrapper').clientHeight; var relativeFontSize = wrapperHeight / 10 + 'px'; //change 10 to any integer for desired font size document.getElementById("lorem").style.fontSize = relativeFontSize; };
body { background-color:white; } #wrapper { width: 95vw; height: calc(95vw * 9/16); max-height: 95vh; max-width: calc(95vh * 16/9); background: center; background-color: blue; background-size:contain; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; font-size:60px; } #lorem { color: aqua; text-align:center; position:absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; margin:auto; }
<div id="wrapper"> <p id="lorem"> This text should scale with div only. </p> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.