CSS Transform to Fit

Using the transform property to fit content between a left and right sidebar.

by asemahle

HTML

<div class="left-sidebar">LEFT SIDEBAR</div>
<div class="right-sidebar">RIGHT SIDEBAR</div>

<div class="container">
  <div class="transformed-content"></div>
</div>

CSS

.container {
  margin-left: 100px;
  width: calc(100% - 300px);
}

.transformed-content {
  margin: auto;
  width: 200px;
  height: 100px;
  transform-origin: top left;
  background: -webkit-radial-gradient(red, yellow, green);
  background: -o-radial-gradient(red, yellow, green); 
  background: -moz-radial-gradient(red, yellow, green); 
  background: radial-gradient(red, yellow, green);
}

.left-sidebar {
  width: 100px;
  height: 100px;
  float: left;
  background-color: blanchedalmond;
}

.right-sidebar {
  width: 200px;
  height: 100px;
  float: right;
  background-color: burlywood
}

JavaScript

var resize = function() {
	let scale = 1;

	if ($('.container').width() < $('.transformed-content').width()) {
  	scale = $('.container').width() / $('.transformed-content').width();
  }
  
  $('.transformed-content').css({
  	'transform': 'scale(' + scale + ')'
  });
}

resize();

$(document).ready(function() {
	$(window).on('resize', resize);
})