JSFiddle - React, Tailwind, and code Playground

by kkdaily

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale -->

<div class="container">
  <div id="content">foo</div>
</div>
<br />
<div class='container'>
  <div id="content2" class="transformed">bar</div>
</div>

CSS

.container {
  height: 200px;
  width: 200px;
  //overflow: hidden;
  border: 1px solid black;
  background: transparent;
  z-index: 999;
}

#content, #content2 {
  width: 300px;
  height: 300px;
  background-color: teal;
  font-size: 30px;
}

#content2 {
  background: blue;
}

h1 { 
  width: 300px;
  height: 300px;
  background-color: teal;
  z-index: -1;
}

.transformed {
  /* same as scaleX(2) scaleY(0.5) */
  transform: scale(0.5, 0.5);
  transform-origin: left;
  background-color: blue;
}

JavaScript

var containerWidth; // need to scale iframe content to match the width of its container
containerWidth = $('.container').css('width'); // 200px

// get the content's width in the container
var contentWidth;
contentWidth = $('#content').css('width'); // 300px;

contentWidth = parseFloat(contentWidth); // 300
containerWidth = parseFloat(containerWidth); // 200


// calculate the scalar
var scalar;
scalar = (containerWidth/contentWidth); // 0.67

// apply css scale transformation to content
$('#content').css({
	transform: 'scale(' + scalar + ',' + scalar + ')',
  transformOrigin: 'top left'
});