This quick guide provides an overview of how to achieve different kinds of resizes and crops for your images using ImageKit. For a detailed explanation and documentation, please check ImageKit Documentation.
1. Resizing with only one dimension specified
Preserves aspect ratio, no cropping
Useful when you are placing the image inside a container where only one dimension is fixed and you want the aspect ratio to be preserved.
2. Resize with both height and width specified
Preserves aspect ratio but may crop the image
Useful when you want an exactly sized image and want to maintain aspect ratio. However the new size that you specify, if does not have the same aspect ratio as the original image, then some cropping would occur.
3. Image to be equal or smaller than the specified dimensions
Maintains aspect ratio, no cropping, image is smaller or equal to the dimension specified.
Useful when you have to preserve the aspect ratio and get the image to fit an image container with some specific dimensions.
4. Image to be at least as big as the specified dimensions
No change in aspect ratio, no cropping, the image is equal or larger than specified dimensions.
Useful when you have an image container and you want to be 100% sure that the image is equal or larger than that container dimensions.
5. Image with padding on the sides
No change is aspect ratio, solid background with the image
Useful when you want to unify the final image sizes for images with different aspect ratios without cropping any part of the image
6. Extract a portion of the image
No resize, cropping is done to get a small portion of the image
Useful when you don’t want to resize down the image but want to extract a portion from the image.
These are just some of the most common examples of how our customers use image resizing for their websites. You can refer to the detailed documentation here to get more options for resize (h & w), crop (c) and crop mode (cm) and focus (fo).