Skip to content

Instantly share code, notes, and snippets.

@monolithed
Forked from ariona/proportional-scale.js
Created October 24, 2022 17:36
Show Gist options
  • Save monolithed/f3ecb48574f4b48d85725e01bd345224 to your computer and use it in GitHub Desktop.
Save monolithed/f3ecb48574f4b48d85725e01bd345224 to your computer and use it in GitHub Desktop.
Proportionally Scale Any HTML Content
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment