CODEWITHSUNDEEP
htmltwitter-bootstrapcssresponsive-design
user5124106
user5124106

Reputation: 403

Using pure CSS, is it possible to make a container's font-size proportional to its width or height?

To make font that always fits nicely in its container, I always use Javascript to make divs or a certain class have their font-size always equal to their width and have their inner text elements defined in terms that font-size.

Demo: http://jsfiddle.net/pjk8t5kb/

<div class="font-size-equals-width">
    <h1>Here's a headline</h1>
    <p>Here's some paragraph text</p>
</div>

.font-size-equals-width
{
    padding: 5%;
    border: 1px solid black;
}

.font-size-equals-width h1 { font-size: 0.2em; }
.font-size-equals-width p { font-size: 0.1em; }

function scaleFontSize ( ) 
{
   $('.font-size-equals-width').each(function()
   { 
       var thisContainer = $(this); 
       thisContainer.css('font-size', thisContainer.width().toString() + 'px');
   });    
}

$(window).resize(function ( ) 
{
    scaleFontSize();       
});

$(document).ready(function()
{
    scaleFontSize();   
});

My question is whether this is possible in CSS? From what I can tell, the only font-size units are %, em, pt and px, none of which are connected to container width or height. Does Bootstrap have anything for this? (I always include Bootstrap in my project but I have a feeling that I under-utilize it.)

Upvotes: 2

Views: 814

Answers (2)

Robotnicka
Robotnicka

Reputation: 574

Seems like you want Viewport Percentage Units: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

Previously answered here: Font scaling based on width of container

Upvotes: 3

jKIM
jKIM

Reputation: 155

Code Pen: http://codepen.io/anon/pen/pJBdxP 

.font-size-equals-width {
  padding: 5%;
  border: 1px solid black;
  width:50%;
  margin: 0 auto;
}

.font-size-equals-width h1 {
  font-size: 2vw;
}

.font-size-equals-width p {
  font-size: 1vw;
}

Try this

Hope it helps

Upvotes: 4

Related Questions