cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you know you can set a signature that will be added to all your posts? Set it here! X

Scaling an image without stretching

chmaloof
7-Bedrock

Scaling an image without stretching

Is there any way to scale an arbitrary image to its container without allowing it to change proportions?

We'd like to allow customers to use an arbitrary image of their asset in our mashup.  I can use a ValueDisplay formatted to scale an image to its container's width or height, but this can cause the image to stretch horizontally or vertically, respectively.  We want a widget that keeps image proportions fixed and chooses which dimension to scale to (like max-width:100% and max-height:100% in CSS).

2 REPLIES 2
Aanjan
9-Granite
(To:chmaloof)

Chris, are you referring to the drop in quality while Scaling? For both ValueDisplay and Image widget, you can scale the image based on width, height or none (that fits and fills up the entire container).

chmaloof
7-Bedrock
(To:Aanjan)

No, I'm referring to images being stretched vertically or horizontally (as the Scaling=None option will do), not just scaled beyond their resolution.

Within the ValueDisplay Image renderer, the options are "Show image", "Show image scaled to height", and "Show image scaled to width".  "Show image" uses the image at its original size, while the other two can distort the image in one direction or the other.  I'm hoping for a way to scale an arbitrary image to fit a container, maintaining its original proportions (leaving space instead of stretching the image).  The CSS seems simple but I don't know if any widget supports it.

Top Tags