This quick guide provides an overview of how to achieve some common variations of resize and crop for your images using ImageKit. For a detailed explanation and documentation, please check the resizing and cropping guides.
We will use the below image for all our examples
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.
Image with width 300px and height is adjusted automatically to preserve aspect ratio
Resize with height 200px and width is automatically adjusted
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.
Image with height = 300px and width = 300px. Notice that the top and the bottom are cropped in this image.
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.
In this case, the height is 300px but to preserve aspect ratio width is kept < 300px
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.
Image with dimensions at least 300px by 300px. Here the width is 300px and height is larger than 300px
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
Image with final dimensions of 500px by 300px. To get this size, without cropping or enlargement, the image is padded with white background on the sides
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.
Example of extract cropping mode to extract the center of the image without resizing. The default focus on center can be changed using the “fo” URL-parameter.