2 Replies Latest reply on Jan 3, 2017 5:51 PM by chmaloof RSS
    chmaloof Explorer

    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).

      • Re: Scaling an image without stretching
        aanjan Heavyweight Champ

        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).

          • Re: Scaling an image without stretching
            chmaloof Explorer

            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.