Add a "Scale to Fill" resize feature

[kleisauke]

Add a "Scale to Fill" resize feature [2834089]

Submitted by tlianza on 8-5-2012 0:00:00
1 votes on UserVoice prior to migration

The service is fantastic and it may be the case that no one thus far is in need of this, but one thing we do at http://www.wishpot.com/ is crop images in such a way that they fill a rectangle, even if that means we have to cut out part of the image (via overflow:hidden in css).
Unlike a normal resize, where you'd set a maximum height and width, what this code does is pick the smallest dimension and make that the height or width of the box. Then, we'll overflow the larger dimension.
For example, to fit an image into a box that's 100h x 50w, if the image is 300h x 200w, we'd make the height 100px, which would make the width 66px. The height would then fit perfectly in our box, and the width would be a little too wide, in which case we just center it and crop off the sides.
As a result, if you're okay with loosing some data, you're able to fill an area completely.

Response

by Andries Louw Wolthuizen on 14-6-2012 0:00:00

Please see the &t=square option, if you feed it an image which is 300h, 200w, and request it like:
http://images.weserv.nl/?url=http://host/dir/image-300h-200w.jpg&t=square&h=100&w=50
It will return the image which is 100×50 centered, and cropped of the sides.
No need to do such things yourself in CSS.
If you want to center it in CSS yourself, use &t=fit (or don’t use any &t=), and only give the height you want.
Example: http://images.weserv.nl/?url=http://host/dir/image-300h-200w.jpg&h=100
This should give you an image of 100×66, which you can center yourself in CSS.
Let me know if there’s still any need for an t=fill option.

Comments

Comment by Andries Louw Wolthuizen (Webmaster, Images.weserv.nl - Image cache & resize proxy) on 8-5-2012 14:55:00

Please see the &t=square option, if you feed it an image which is 300h, 200w, and request it like:
http://images.weserv.nl/?url=http://host/dir/image-300h-200w.jpg&t=square&h=100&w=50
It will return the image which is 100x50 centered, and cropped of the sides.
No need to do such things yourself in CSS.
If you want to center it in CSS yourself, use &t=fit (or don't use any &t=), and only give the height you want.
Example: http://images.weserv.nl/?url=http://host/dir/image-300h-200w.jpg&h=100
This should give you an image of 100x66, which you can center yourself in CSS.
Let me know if there's still any need for an t=fill option.

Comment by tlianza on 8-5-2012 20:08:00

That is AWESOME! Sorry, when I saw square, I had made the assumption that it could only produce square images. But, reading further I see what you're saying, and that you can pass it non-square dimensions. That's great.

Original UserVoice Submission