Resize with Scale

index.html

<div class="scaleable-wrapper" id="scaleable-wrapper">
  
  <div class="very-specific-design" id="very-specific-design">
  
    <h1>I am designed just so.</h1>
  
    <p>My design is intentional. I want to be scaled in such a way that scales the design. No reflows or anything, just straight up scaling. Kinda like SVG.</p>
    
   www
    
    <p class="bigred"> prova </p>
    
  </div>
  
</div>

resize-with-scale.markdown

Resize with Scale

A Pen by frhack on CodePen.

License.

script.js

var $el = $("#very-specific-design");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();

var $wrapper = $("#scaleable-wrapper");

$wrapper.resizable({
  resize: doResize
});

function doResize(event, ui) {
  
  var scale, origin;
    
  scale = Math.min(
    ui.size.width / elWidth,    
    ui.size.height / elHeight
  );
  
  $el.css({
    transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
  });
  
}

var starterData = { 
  size: {
    width: $wrapper.width(),
    height: $wrapper.height()
  }
}
doResize(null, starterData);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.scss

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

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

.scaleable-wrapper {
  padding: 20px;
  resize: both;
  position: relative;
  background: #666;
  height: 400px;
}

.ui-resizable-se {
  width: 10px;
  height: 10px;
  background: orange;
  position: absolute;
  bottom: 0;
  right: 0;
}

.bigred {
  color: red;
  font-size: 5rem;
}