JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<div class="slide-container" id="slide-container">
  <div class="slide-content" id="slide-content">

    <h1>MAP-X STORY MAP</h1>

    <p>Et aliquid eleifend forensibus vis. In zril veritus pri, no his vero adversarium. In prima accusam eum, has legimus albucius an. Pri munere vidisse et. Vim te equidem gubergren, vix an vidisse repudiare.</p>
    <img src="https://www.gravatar.com/avatar/8d77b29f8ab3cf2d71c1f4d8cf0d31b0/?default=&s=64" alt="" />
    <p>
      Suas signiferumque ex quo, no eam quem amet omnesque, vix in nonumy sadipscing. Sed mazim elitr explicari an. Quidam integre equidem ea pri, ad vitae nullam intellegam mel, sea te suas fugit causae. Viris noster intellegam mel ad. Ei has tincidunt interesset
      appellantur, ne nam dicat quidam lobortis.</p>

  </div>

</div>

CSS

body, html * {
  font-family: sans-serif;
}


body {
  background: #ccc;
  padding: 20px;
}

.slide-content {
  width: 600px;
  height: 400px;
  padding: 50px;
  text-align: center;
  background: white;
  position: relative;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transform-origin: center center;
  tranform-origin: center center;
}

.slide-container {
  padding: 20px;
  position: relative;
  background: #666;
  height: 80vh;
  width: 80vw;
}

JavaScript

var el = document.getElementById("slide-content");
var elWrapper = document.getElementById("slide-container");

var elRect = el.getBoundingClientRect();

window.addEventListener("resize", layout);


function layout(event) {
  var w, h, scale, origin;

  bodyRect = elWrapper.getBoundingClientRect();
  w = bodyRect.width;
  h = bodyRect.height;

  scale = Math.min(
    w / elWidth,
    h / elHeight
  );

  el.style.transform = "translate(-50%, -50%) " + "scale(" + scale + ")";

}

var elHeight = elRect.height;
var elWidth = elRect.width;

layout();