JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<div class="guide"></div>
<div class="obj" id="box1"></div>
<div class="obj" id="box2"></div>

CSS

#box1 {
  display: block;
  position: absolute;
  left: 10px;
  top: 10px;
  width: 250px;
  height: 300px;
  background-color: blue;
}

#box2 {
  display: block;
  position: absolute;
  left: 150px;
  top: 30px;
  width: 450px;
  height: 150px;
  background-color: red;
}

.guide {
  width: 320px;
  height: 500px;
  position: absolute;
  border: 1px solid black;
  position: absolute;
  z-index: 5;
  left: 0px;
  top: 0px;
  
}

JavaScript

$( function(){
  // Change this to true to scale to 320 pixels
  var original_size = true;
  
  if ( !original_size ) {
    $( '.obj' ).each( function( i, v ) {
      
      
      
      var ratio = parseFloat( $( v ).width() / $( v ).height() );
      var left = parseFloat( parseInt( $( v ).css('left') ) / ratio );
      var top = parseFloat( parseInt( $( v ).css('top') ) / ratio );
      var width = parseFloat( parseInt( $( v ).css('width') ) / ratio );
      var height = parseFloat( parseInt( $( v ).css('height') ) / ratio );
      
      $( v ).css({
        'left': left+'px',
        'top': top+'px',
        'width': width+'px',
        'height': height+'px'
      });
    });
  }
});