Helios Editor

Image Resizing

Simple and intuitive client-side image resizing with handles.

How to Resize Images

  1. Click any image to select it (shows blue border with resize handles)
  2. Drag corner handles to resize freely (width and height independently)
  3. Drag edge handles for single-dimension resizing
  4. Click outside to deselect the image

Resize Features

8 Resize Handles

4 corners + 4 edges for precise control

No Aspect Ratio Constraints

Resize to any dimensions you need

Minimum Size Constraints

50px width, 30px height minimum

Visual Feedback

Clear indicators during resize operations

Clean HTML Output

The editor is designed to keep the underlying HTML clean from temporary resizing elements. Resize controls are editor-only and don't appear in the final HTML output.

Note: When you resize an image, only the width and height attributes are updated in the HTML. No temporary classes or wrapper elements are added.

Usage Tips

  • Use corner handles for proportional resizing
  • Use edge handles to resize only width or height
  • Images maintain their aspect ratio by default when using corner handles
  • Resize handles appear automatically when an image is selected
  • Click outside the image to deselect and hide handles

Related Features

Image resizing works seamlessly with image upload. Learn more about: