Image Resizer wraps a normal img element and gives users side drag handles for changing the displayed image width. Mark the image with ngsImageResizerImage, set optional imageMinWidth and imageMaxWidth, and listen to imageResized for the current rendered size and natural image size.
Use it when users need to manually choose how large an image appears in an editor, content form, thumbnail preview, banner preview, or media preparation flow. The component changes the image's displayed CSS width; it does not crop, compress, upload, optimize, or rewrite the source file.
Do not use Image Resizer for crop selection, zoom and pan viewing, simple image viewing, full canvas design, resizing panels or containers, server-side file processing, or loading placeholders. Use Crop, ImageZoomViewer, ImageViewer, ImageDesigner, ResizableContainer, backend image processing, or ImagePlaceholder for those cases.
Key features:
- Interactive side handles for changing image width.
- Minimum and maximum width constraints.
- Emits rendered width, rendered height, natural width, and natural height.
- Works with a standard HTML image element through
ngsImageResizerImage.