CODEWITHSUNDEEP
htmlcss
coure2011
coure2011

Reputation: 42514

font-size percentage with respect to container

how to change font-size with respect to its container.

<div id="container" style="width: 100%; height: 100%; border: 1px solid #ff0">
    <span style="font-size: 18px">Test</span>
</div>

Now if i resize my window the container is also resized but the font-size remain of fix size, i want to change the font-size according to its container. Possible?

Upvotes: 3

Views: 2906

Answers (2)

TheOneAndOnlySammy
TheOneAndOnlySammy

Reputation: 21

You could always do something like this:

<!DOCTYPE html>

<html>
  
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
  
<body>
  
<div id="container" style="width:500px; height: 100%; border: 1px solid #ff0">
    <span style="font-size: 18px" id="test">Hey! I'm a test</span>
</div>
  
<script>
    var container = document.getElementById('container');
    var text = document.getElementById('test');
    text.style.fontSize=parseInt(container.style.width)/6+"px";
</script>
  
</body>
  
</html>

But, it requires the width of the container to be in pixels.

Upvotes: 0

Moin Zaman
Moin Zaman

Reputation: 25465

using javascript / jquery you can do this: http://www.pukkared.com/?p=996

Upvotes: 3

Related Questions