CODEWITHSUNDEEP
htmlcss
Roey Zada
Roey Zada

Reputation: 683

CSS line-height and font-size: shrink relatively to the container?

I've created a photo-album generator, a person can add photos and text a manipulate them as he feels like.

one of my demands is to resize screen to fit different proportions and resolutions so the images and text need to be fit correctly on any screen and size.

with an image is easy, I just make a position: absolute; relative to the page but I cannot seems to get my head around how to make this with font-size and line-height.

I have an example here with the issue I have: (please notice the difference between 300 size to 600)

var def = 400;
var fontsize = 20;
var lineHeight = 20;

var init = function() {
  var val = document.getElementById('val');
  val.onchange = function() {
    var value = parseInt(this.value);
    if (!isNaN(value)) {
      var diff = (def / value) * 100;

      document.getElementById('wrap').style.fontSize = ((fontsize / diff) * 100) + 'px';
      document.getElementById('container').style.lineHeight = ((lineHeight / diff) * 100) + 'px';

      document.getElementById('container').style.width = value + 'px';
      document.getElementById('container').style.height = value + 'px';
    }
  }
}
.wrap {
  font-size: 20px;
}

.container {
  width: 400px;
  height: 400px;
  background-color: #eee;
  line-height: 20px;
}

.container p {
  font-size: 1em;
  line-height: inherit;
}
<html>

<head>
  <style>

  </style>
</head>

<body onload="init();">

<h1>switch between 300 and 600 values to see how the line breaks and is not resized in synced with its parent</h1>
  <input id="val" type="text" value="400" />

  <div id="wrap" class="wrap">
    <div id="container" class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur risus in cursus ullamcorper. Quisque volutpat neque sed vestibulum iaculis. Quisque luctus mollis euismod. Fusce pharetra dictum justo, ac volutpat leo sollicitudin sed.
        Nunc pellentesque nibh vulputate urna hendrerit convallis. Praesent eleifend rutrum odio eget facilisis. Nulla placerat ultricies erat.</p>
      <p>Quisque eget sagittis massa. Cras scelerisque molestie sollicitudin. Nulla vehicula, sem vel lacinia varius, lacus orci iaculis neque, at lacinia mi nulla rutrum velit. Mauris pulvinar sem sit amet tempus dapibus. Duis augue tortor, ullamcorper
        ac erat sed, cursus fermentum ex. Maecenas mattis felis nec aliquam imperdiet. Integer eget accumsan ante, eget maximus nunc.</p>
    </div>
  </div>

  <script type="text/javascript">
  </script>
</body>

</html>

Upvotes: 0

Views: 707

Answers (1)

Asons
Asons

Reputation: 87191

A simple way for this could be to use transform: scale.

It will produce the same scaled result cross browser.

var def = 400;
var init = function() {
  var val = document.getElementById('val');
  val.onchange = function() {
    var value = parseInt(this.value);
    if (!isNaN(value)) {
      var diff = (value / def);
                                        /*  changed property and value  */

      document.getElementById('wrap').style.transform = 'scale('+diff+')';
    }
  }
}
.wrap {
  font-size: 20px;
  transform-origin: left top;          /*  added property  */
}

.container {
  width: 400px;
  height: 400px;
  background-color: #eee;
  line-height: 20px;
}

.container p {
  font-size: 1em;
  line-height: inherit;
}
<body onload="init();">
<h1>switch between 300 and 600 values to see how the line breaks and is not resized in synced with its parent</h1>
  <input id="val" type="text" value="400" />

  <div id="wrap" class="wrap">
    <div id="container" class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur risus in cursus ullamcorper. Quisque volutpat neque sed vestibulum iaculis. Quisque luctus mollis euismod. Fusce pharetra dictum justo, ac volutpat leo sollicitudin sed.
        Nunc pellentesque nibh vulputate urna hendrerit convallis. Praesent eleifend rutrum odio eget facilisis. Nulla placerat ultricies erat.</p>
      <p>Quisque eget sagittis massa. Cras scelerisque molestie sollicitudin. Nulla vehicula, sem vel lacinia varius, lacus orci iaculis neque, at lacinia mi nulla rutrum velit. Mauris pulvinar sem sit amet tempus dapibus. Duis augue tortor, ullamcorper
        ac erat sed, cursus fermentum ex. Maecenas mattis felis nec aliquam imperdiet. Integer eget accumsan ante, eget maximus nunc.</p>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions