Preserve aspect ratio while resizing?
Question
When a user resizes an image, I'm trying to maintain the original aspect ratio, as there's little need to skew an image. I believe I've found the code handling this behavior. However, it's unclear to me whether I should modify the Start key or something else.
@artf - Any suggestions?
* Start resizing
* @param {Event} e
*/
}, {
key: 'start',
value: function start(e) {
//Right or middel click
if (e.button !== 0) {
return;
}
e.preventDefault();
e.stopPropagation();
var el = this.el;
var resizer = this;
var config = this.opts || {};
var attrName = 'data-' + config.prefix + 'handler';
var rect = this.getElementPos(el);
this.handlerAttr = e.target.getAttribute(attrName);
this.clickedHandler = e.target;
this.startDim = {
t: rect.top,
l: rect.left,
w: rect.width,
h: rect.height
};
this.rectDim = {
t: rect.top,
l: rect.left,
w: rect.width,
h: rect.height
};
this.startPos = {
x: e.clientX,
y: e.clientY
};
// Listen events
var doc = this.getDocumentEl();
(0, _mixins.on)(doc, 'mousemove', this.move);
(0, _mixins.on)(doc, 'keydown', this.handleKeyDown);
(0, _mixins.on)(doc, 'mouseup', this.stop);
(0, _underscore.isFunction)(this.onStart) && this.onStart(e, { docs: doc, config: config, el: el, resizer: resizer });
this.move(e);
}
I'm looking to integrate this helper function:
/**
* Conserve aspect ratio of the orignal region.
*
* @param {Number} srcWidth width of source image
* @param {Number} srcHeight height of source image
* @param {Number} maxWidth maximum available width
* @param {Number} maxHeight maximum available height
* @return {Object} { width, height }
*/
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
return { width: srcWidth*ratio, height: srcHeight*ratio };
}
Answers (3)
I had a max-width on my images which was skewing them when I resized them too large, whoops!
Greate, I close this then
Is there a way to disable certain handles? Besides w/ CSS
Each component has a resizable property where you can also pass an object as options for the Resizer
@AustinTBiggs did you try to use corner handlers? By default, the ratio is preserved, otherwise you can hold shift to turn it off

I had a max-width on my images which was skewing them when I resized them too large, whoops!
@artf - Is there a way to disable certain handles? Besides w/ CSS
Related Questions and Answers
Continue research with similar issue discussions.
Issue #455
Need help: Ask for user input for text/imageurl/hyperlink
we are building template where it will render div with background image and on hover it will display some text, also there will be hyper li...
Issue #850
[Question]: Component:Moved Event
What I'm trying to accomplish: I have a piece of code I need to run when a component is "dropped". I put "dropped" in quotes, because it ne...
Issue #1227
Re-render view in editor's canvas whenever Trait value changes
Is there any possible way in grapesjs that whenever a user changes the value of a Trait of a custom component the render function should li...
Issue #1954
[QUESTIONS] Creating image map on canvas
Hi, Is there anyway to create image map like functionality on canvas. User should be able to select particular area for linking. Example th...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.