|
I’d like to be able to resize images to fit within specified dimensions, without cropping the images, and with the resulting image actually having the specified dimensions.
For example, if I take an all-red 200x100 image and do this:
{exp:ce_img:single src="source_200x100.jpg" width="100" height="100"}
The resulting image will be a red 100x50px rectangle. If I add the crop parameter:
{exp:ce_img:single src="source_200x100.jpg" width="100" height="100" crop="yes"}
The resulting image will be a red 100x100 square, but missing 25% of the original image contents on each side.
What I want is a new parameter, perhaps called “pad” or “contain”, that interfaces with the existing “bg_color” parameter:
{exp:ce_img:single src="source_200x100.jpg" width="100" height="100" pad="yes" bg_color="#0000ff"}
This would result in an image that is 100x100px, has a 25px blue strip along the top, a 50px red strip below that, and another 25px blue strip along the bottom.
Perhaps the new “pad” or “contain” parameter can even have some of the sub-parameters that “crop” has - namely, the yes_or_no, position, and offset params.
Thoughts?
EDIT: Thought I’d add a use-case. I’m building an online store, and the product images have all sorts of w/h ratios. I want to display them as squares, without cropping out anything (book titles were disappearing). I can’t do it in CSS because of the responsive design solution in use, which needs the image’s max-width to be 100%.
|
