<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra consequat ipsum, et ullamcorper massa commodo ac. Nullam nulla sem, porttitor ac dui aliquam, varius facilisis massa. Sed risus ligula, vulputate eu semper sit amet, auctor a dolor. Donec mi ipsum, rhoncus sed tellus non, dignissim hendrerit orci. Pellentesque pulvinar, tellus nec maximus egestas, metus enim volutpat tortor, euismod mattis velit libero nec elit. Nulla nec velit rhoncus, malesuada nisi sit amet, eleifend quam. Suspendisse pretium arcu lacus, quis sodales lacus sodales eu.
</p>
<div class="scale__container--js">
<h1 class="scale--js">I'm full width</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra consequat ipsum, et ullamcorper massa commodo ac. Nullam nulla sem, porttitor ac dui aliquam, varius facilisis massa. Sed risus ligula, vulputate eu semper sit amet, auctor a dolor. Donec mi ipsum, rhoncus sed tellus non, dignissim hendrerit orci. Pellentesque pulvinar, tellus nec maximus egestas, metus enim volutpat tortor, euismod mattis velit libero nec elit. Nulla nec velit rhoncus, malesuada nisi sit amet, eleifend quam. Suspendisse pretium arcu lacus, quis sodales lacus sodales eu.
</p>
<div class="container">
<div class="scale__container--js">
<h2 class="scale--js">I'm full width too!</h2>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra consequat ipsum, et ullamcorper massa commodo ac. Nullam nu
</p>
</div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #333;
color:#fff;
font-family: 'Open Sans Condensed'
}
p {
line-height: 20px;
}
.scale__container--js {
text-align: center;
}
.scale--js {
display: inline-block;
transform-origin: 50% 0;
-webkit-font-smoothing: antialiased;
transform: translate3d( 0, 0, 0);
}
.container {
margin: 30px 0;
max-width: 500px;
background: tomato;
padding:30px;
}
function scaleHeader() {
var scalable = document.querySelectorAll('.scale--js');
var margin = 10;
for (var i = 0; i < scalable.length; i++) {
var scalableContainer = scalable[i].parentNode;
scalable[i].style.transform = 'scale(1)';
var scalableContainerWidth = scalableContainer.offsetWidth - margin;
var scalableWidth = scalable[i].offsetWidth;
scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
}
}
// Debounce by David Walsch
// https://davidwalsh.name/javascript-debounce-function
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var myScaleFunction = debounce(function() {
scaleHeader();
}, 250);
myScaleFunction();
window.addEventListener('resize', myScaleFunction);
