Scale DOM Element To Fit Inside It's Parent With CSS

For image and video elements, we can use: width:100%; height:auto;, or even better: object-fit:scale-down; to have the image automatically scaled to fit within it's parent. Is ther

Solution 1:

I do not think this is possible with pure css as you would need to recalculate the ratio between the parent and child when the browser resizes (css is not able to do this as it is not programming language - just a styling one).

A jQuery solution would be as follows:

function scale() {
  $('.scaled').each(function() {
    var scaled = $(this),
      parent = scaled.parent(),
      ratio = (parent.width() / scaled.width()),
      padding = scaled.height() * ratio;

    scaled.css({
      'transform': 'scale(' + ratio + ')',
      'transform-origin': 'top left'
    });

    parent.css('padding-top', padding); // keeps the parent height in ratio to child resize
  })
}

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

.test {
  border: 1px solid red;
  width: 30%;
  position: relative;
}
.scaled {
  /* needs to be positioned absolutey otherwise the parent takes the child original height */
  position: absolute;
  top: 0;
  left: 0;
}
.scaled,
.not-scaled {
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="scaled">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat quis magna in tempus. Vivamus magna metus, consequat at mollis sit amet, vulputate et eros. Phasellus ut mauris faucibus, ultrices mauris at, mollis eros. In hac habitasse platea
    dictumst. Cras placerat pretium dui. Nullam quis lacinia nunc. Quisque est lectus, maximus at vehicula et, accumsan non nisi. Proin ac purus eget neque fermentum fringilla. Sed lectus mauris, pulvinar et venenatis ut, gravida quis nibh. Interdum et
    malesuada fames ac ante ipsum primis in faucibus. In dapibus purus facilisis consequat aliquam. Donec mattis orci fermentum laoreet scelerisque. Aliquam pretium urna tortor, quis viverra lacus posuere eu. Maecenas posuere mauris in sapien gravida,
    sed placerat purus efficitur.
  </div>
</div>
<div class="not-scaled">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat quis magna in tempus. Vivamus magna metus, consequat at mollis sit amet, vulputate et eros. Phasellus ut mauris faucibus, ultrices mauris at, mollis eros. In hac habitasse platea
  dictumst. Cras placerat pretium dui. Nullam quis lacinia nunc. Quisque est lectus, maximus at vehicula et, accumsan non nisi. Proin ac purus eget neque fermentum fringilla. Sed lectus mauris, pulvinar et venenatis ut, gravida quis nibh. Interdum et
  malesuada fames ac ante ipsum primis in faucibus. In dapibus purus facilisis consequat aliquam. Donec mattis orci fermentum laoreet scelerisque. Aliquam pretium urna tortor, quis viverra lacus posuere eu. Maecenas posuere mauris in sapien gravida, sed
  placerat purus efficitur.
</div>

Solution 2:

For those who don't want to use jQuery or have to use pure JavaScript here's converted pure JavaScript Code:

function scale() {
  document.querySelectorAll('.scaled').forEach(scaled => {
      parent = scaled.parentNode,
      ratio = (parent.offsetWidth / scaled.offsetWidth),
      padding = scaled.offsetHeight * ratio;

    scaled.style.transform = 'scale(' + ratio + ')';
    scaled.style.transformOrigin = 'top left';

    parent.style.paddingTop = padding; // keeps the parent height in ratio to child resize
  })
}

scale();
window.onresize = scale();

Credit goes to @Pete, I only transcoded it for pure JavaScript. You'll also need CSS and HTML from his answer.