Auto Scaling Example

Tests of scaling an object to it's parent container

by dswitzer

HTML

<div class="scaleable-container">
  <div id="banner-message" class="scaleable">
    <p>Hello World</p>
    <button>Change color</button>
  </div>
</div>

CSS

.scaleable-container {
  background-color: #ccc;
  padding: 1em;
}

.scaleable {
/*
  display: inline-block;
*/
  transform-origin: 50% 0;
  -webkit-font-smoothing: antialiased;
  transform: translate3d( 0, 0, 0);
}

/* template styles */
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
/*
  transition: all 0.2s;
*/
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

function scaleHeader() {
  var scalable = document.querySelectorAll('.scaleable');
  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;
    var scale = scalableContainerWidth / scalableWidth;
    scalable[i].style.transform = 'scale(' + scale + ')';
    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);
	};
};

scaleHeader();

window.addEventListener('resize', debounce(function() {
	scaleHeader();
}, 100));