Resize images to fit an image grid
Resize pristine images to fit into an existing image grid in your application or on your web site.
For this recipe we'll use three transformations. The Resize transformation lets you reduce an original image down to fit in, for example, to a square grid. The Crop transformation lets cut an image down to an area you specify. The Background Color lets you and specify a background color to fill in any space not occupied by the image.
Here's the image before and after you resize it for your image grid. We also added red a background color to fill the top and bottom areas of your image:
![]() |
![]() |
To resize an image to fit into an image grid in your application or web site, locate the URL of the image. For example, the URL for this image is:
https://www.travelanywhere.com/Place_Archive/0503/palmbeach.jpg