Fit
Guide to Understanding Fit Parameters in Image Editing
Adjusting image size is a fundamental task in image editing, especially in web design and online content management. Various “fit” parameters offer numerous ways to adjust images to specific dimensions without losing their proportions or creating unwanted empty areas.
Overview of Fit Modes
The following sections explain the different available fit modes and demonstrate how to use them to achieve various image adjustment goals.
fit=clamp
The clamp mode adjusts the image to fit within given width and height dimensions without cropping or distorting it.
Excess space is filled with pixels from the edge of the image.
fit=clip (Default)
clip is the default mode that adjusts the image to fit within the specified dimensions without cropping or distorting
it. The resulting image matches one of the constraining dimensions.
| Original Image | Clipped Image 1 | Clipped Image 2 |
|---|---|---|
|
|
|
fit=crop
crop adjusts the image to fill the width and height dimensions and cuts off any excess image data. The result matches
the width and height constraints without distorting the image.
| Original Image | Cropped Image 1 | Cropped Image 2 |
|---|---|---|
|
|
|
fit=facearea
facearea finds the area containing all faces or a specific face in an image and scales it to specified width and
height dimensions.
fit=fill
fill adjusts the image to fit the requested width and height dimensions while preserving the original aspect ratio.
Excess space is filled with a solid color or a blurred version of the image.
There are multiple modes of fill you can soon use:
- Solid (the default) you can add a color with
fill-color: XXright now only written colors are supported. link to all supported colors, - Blur (WIP)
- Gradient (WIP)
| Original Image | Filled 3:6 Image | Filled 6:3 Image |
|---|---|---|
|
|
|
Other Modes
There are other modes like fit=fillmax, fit=max, fit=min, and fit=scale, each offering specific adjustments to
meet different requirements for image resizing and quality.
Conclusion
Choosing the right fit mode is crucial for achieving the desired image output, especially in web and app designs where the balance between quality and load times is important. By understanding and applying these modes, developers and designers can effectively optimize images for their projects.