Who this is for. Developers choosing the third argument of getResized(). After this page you can predict the size and shape of a resize before you load the page, and know which strategies need both dimensions.
The seven at a glance
Every example starts from the same 1200 × 800 landscape photo.
| Strategy | Dimensions it needs | Example | Result |
|---|---|---|---|
auto (the default) | Width, height or both | getResized(600, 600) | 600 × 400, fitted inside the box |
landscape | Width | getResized(600, null, 'landscape') | 600 × 400 |
portrait | See below | getResized(null, 600), with auto instead | 900 × 600 |
fit | Both | getResized(600, 600, 'fit') | 600 × 600, the overflow cropped |
crop | Both | getResized(600, 600, 'crop') | A 600 × 600 region, not scaled |
exact | Both | getResized(600, 600, 'exact') | 600 × 600, stretched |
square | Width or height | getResized(600, null, 'square') | 600 × 600, stretched |
So exact, fit and crop need both dimensions, landscape needs a width, and auto and square need at least one. A missing dimension for exact, fit or crop raises Target width and height need to be set for crop resizing (the message says crop for all three), and any other strategy name raises Resize strategy not supported: <name>. Whether that error is quiet or fails the page depends on where the call sits in a chain; see When a resize is impossible.
Each strategy
auto
With one dimension, the other follows from the aspect ratio: getResized(600) gives 600 × 400 and getResized(null, 200) gives 300 × 200. With both, the image is scaled to fit inside the box without cropping, so one side comes out smaller than you asked: getResized(600, 600) gives 600 × 400. Use it when the whole image must show and its shape may vary.
landscape
Needs a width; the height is computed from it. getResized(600, null, 'landscape') gives 600 × 400, the same as auto with only a width.
portrait
For a height with the width computed from it, use auto with only a height: getResized(null, 600) gives 900 × 600.
fit
Needs both. Fills the whole box and crops whatever overflows, like CSS object-fit: cover: getResized(600, 600, 'fit') gives 600 × 600 from the centre of the photo, with the sides cut off. Despite the name, this is the strategy that crops to fill. It is the usual choice for cards, thumbnails and heroes with a fixed shape.
crop
Needs both. Cuts a region of exactly that size out of the original without scaling it, so getResized(600, 600, 'crop') gives a 600 × 600 detail of the photo. A region larger than the image is clipped to it: a 300 × 300 crop of a 480 × 240 image comes back 300 × 240. The crop's origin and a scale can be set only through the image URL (x, y and c on Image URL parameters).
exact
Needs both. Forces the image to that size and ignores the aspect ratio: getResized(600, 600, 'exact') gives a stretched 600 × 600.
square
Needs one dimension, width or height, and makes a square of that side using exact: getResized(600, null, 'square') gives 600 × 600, so a non-square image is stretched. For a square without distortion, use fit with the same width and height.