Image resizes preserves ratio

This commit is contained in:
Henrik Giesel 2021-07-21 02:37:07 +02:00 committed by Damien Elmes
parent 1756bca212
commit 49da806d91

View file

@ -31,13 +31,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
naturalWidth = image.naturalWidth; naturalWidth = image.naturalWidth;
naturalHeight = image.naturalHeight; naturalHeight = image.naturalHeight;
(containerTop = containerRect.top), containerTop = containerRect.top;
(containerLeft = containerRect.left), containerLeft = containerRect.left;
(top = imageRect.top - containerTop), top = imageRect.top - containerTop;
(left = imageRect.left - containerLeft), left = imageRect.left - containerLeft;
(width = image.clientWidth), width = image.clientWidth;
(height = image.clientHeight), height = image.clientHeight;
(hidden = false); hidden = false;
} else { } else {
hidden = true; hidden = true;
} }
@ -58,10 +58,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const dragWidth = event.clientX - containerLeft - left; const dragWidth = event.clientX - containerLeft - left;
const dragHeight = event.clientY - containerTop - top; const dragHeight = event.clientY - containerTop - top;
width = dragWidth; const widthIncrease = dragWidth / naturalWidth;
image!.style.width = `${dragWidth}px`; const heightIncrease = dragHeight / naturalHeight;
height = dragHeight;
image!.style.height = `${dragHeight}px`; if (widthIncrease > heightIncrease) {
width = dragWidth;
height = naturalHeight * widthIncrease;
} else {
height = dragHeight;
width = naturalWidth * heightIncrease;
}
image!.style.width = `${width}px`;
image!.style.height = `${height}px`;
} }
const nightMode = getContext(nightModeKey); const nightMode = getContext(nightModeKey);