How to get Contextual Image Delivery to deliver an image with specific aspect ratio regardless of source image size?

Question

I am using the scale function of CID to deliver images cropped to a specific aspect ratio, in order that they 'fit' in a certain web design. For example if I want to have a 'hero' image on certain pages with an aspect ratio of 3.3. I use the width as 1024 and height as 1024/3.3 = 310:

/cid/scale/1024x310/source/site/media/useless-fluff.jpg

This works fine if the source image is larger than the dimensions I provide in the URL, but if one or both of the dimensions of the source image is smaller than those I provide, I get an image back which has a different aspect ratio.

For example if my source image happens to be 960 x 460 px, then I get an image back that is 960 x 310 px.

This 'breaks' the design. Not because the image width is too small (the design takes care that the image is stretched to fit the whole screen width) but because the aspect ratio is wrong (its 3.1 instead of 3.3)

So the question is, can I (without knowing up front the size of the source image) get CID to always return an image of the required aspect ratio?

Answer 1

I'm not sure this is possible in the current implementation.

The scale operation is intended to scale an image down to the given dimensions, with cropping if the source image will not scale proportionally to the target size - so in effect it should not change the change the original format's aspect ratio of the source image. It also never scales up a source image in either dimension - as this can lead to poor quality images.

In your case, the 1024x310 dimensions will mean that it will attempt to scale down an image to these proportions. However, if the source image is smaller in either direction, then that will be the maximum size returned in that axis, and the image will be cropped in the other axis to maintain the original format aspect ratio. Clearly the target aspect ratio will be different.

It sounds like you need a new operation which allows you to constrain the scaled aspect ratio of the target image. For your 960 x 410 source image, you want a target image of 960 x 291 image.

The only solution right now is to make sure your source images are larger than 1024x310.

Failing this, you could get a less good quality solution by using the smallest image that you are likely to process as the target size, e.g. 960x291 - then allow the browser to upscale it to 1024x310. It wouldn't be as good quality as having a larger source image.