1

I am trying to figure out how to set a the size of a font to be height/width = 100% of a browser window and make it responsive.

I understand it will be mangled - but I want the font to be 100% width and 100% height.

essentially

<div (set to responsive 100% of browser)>
  <p class="100by100">
    sample
  </p>
</div>

where "Sample" is always 100% of the bowser width and height.

thanks

hypermails
  • 726
  • 1
  • 10
  • 28
  • check this out http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container – Santhucool Mar 11 '16 at 05:37
  • my question is a little different. I want to force the font size to be 100% of h and 100 of w. the view ports setting just scales the font up or down. – hypermails Mar 11 '16 at 06:42
  • So you want to stretch the text to fill the viewport in _both_ dimensions? That is not possible using `font-size`. You might want to look into `transform:scale()` for that. – CBroe Mar 11 '16 at 16:07
  • Font size change proportionally. 100% of h and w of the viewport would result in a distorted font which, AFAIK, is not possible... Maybe you can use an image instead? – ForguesR Mar 11 '16 at 16:08

1 Answers1

1

I got this to work, but I had to use javascript to set the transform on the inner element. https://jsfiddle.net/ynheeut3/

html:

<div id="container">
  <div id="fill">sample</div>
</div>

css:

#container {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0; bottom: 0; left: 0; right: 0;
  overflow: hidden;
}
#fill {
  margin: 0;
  display: inline-block;
  transform-origin: 0 0;
}

javascript:

function fillWithText () {
  var fill = document.getElementById('fill');
  var container = document.getElementById('container');

  var totalHeight = container.clientHeight;
  var totalWidth = container.clientWidth;

  var currentHeight = fill.clientHeight;
  var currentWidth = fill.clientWidth;

  var scaleX = totalWidth / currentWidth;
  var scaleY = totalHeight / currentHeight;

  fill.style.transform = 'scale(' + scaleX + ',' + scaleY + ')';
};
window.addEventListener('resize', fillWithText, false);
fillWithText();
Matt
  • 386
  • 3
  • 9