Skip to content

Instantly share code, notes, and snippets.

@frhack
Created August 1, 2019 14:21
Show Gist options
  • Save frhack/f03b69db39c3e9b2bd2d68cefc8b0caf to your computer and use it in GitHub Desktop.
Save frhack/f03b69db39c3e9b2bd2d68cefc8b0caf to your computer and use it in GitHub Desktop.
Resize with Scale
<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>
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);
<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>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment