mirror of
https://github.com/ankitects/anki.git
synced 2025-09-24 08:46:37 -04:00
Image resizes preserves ratio
This commit is contained in:
parent
1756bca212
commit
49da806d91
1 changed files with 20 additions and 11 deletions
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue