Phenomenon
When resizing an image in a contenteditable element, the aspect ratio is not preserved by default. Images become distorted when resized, requiring manual aspect ratio preservation.
Reproduction example
- Insert an image into contenteditable
- Resize the image by dragging
- Observe image distortion
Observed behavior
- Image width and height change independently
- Aspect ratio is not maintained
- Image becomes distorted
- Requires manual calculation to preserve ratio
Expected behavior
- Aspect ratio should be preserved by default
- Or option to preserve aspect ratio
- Images should not become distorted
- Resize should be intuitive
Browser Comparison
- All browsers: Aspect ratio not preserved by default
- Custom implementation needed for aspect ratio preservation
Notes and possible direction for workarounds
- Implement custom resize with aspect ratio lock
- Calculate height based on width change
- Use Shift key modifier to toggle aspect ratio lock
- Provide visual feedback during resize
