Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
José
75
Resizing images inside WebImageViewer control
posted

I'm using the control to present a series of picture, one picture at a time. The webImageViewer is 300x300 so when a picture that's 200x300 it looks bad because the next picture is cut off.

Is there a way to resize the picture in the WebImageViewer or as an ImageItem so that if the picture width is less than the webImageViewer width then it will fit only one picture?    A 200x300 picture would turn into 300x450 picture in the 300x300 control.

Thanks,

José

  • 4493
    Verified Answer
    posted

    Hello Jose,

    There is not straight-forward way to achieve your goal. However it is feasible.
    First I would like to explain what ImageViewer does and why it does that.

    When control (WebImageViewer) is rendered horizontally (Orientation=Horizontal) It sets only HEIGHT property of inner image elements. The value is set to 100%, so browsers automatically set WIDTH ti contrain proportions of the image.

    When control is rendered vertically (Orientation=Vertical) it sets only WIDTH property of images. The value is again 100%, but now the browser automatically calculates the HEIGHT so that proportions of image will not be distroyed.

    Now, you certainly can change dimensions of rendered images, however explicitly setting a dimensions of 300x300 for a picture that is 200x300 will certainly break proportion and cause image to look unpleasantly.

    You can what you want by hooking at the Initialize client side event, in this way:
    <ClientEvents Initialize="wivInit"  />

    Now you have to define your handler:

     

     

     

     

     

     

     

     

     

    function wivInit(webImageViewer, eventArgs) {
        var itemsCollection = webImageViewer.get_items();
        var itemsCount = itemsCollection.get_length();
        for(var i = 0; i < itemsCount; i++) {
            var imageItem = itemsCollection.getItem(i);
            imageItem.get_element().style.width =     "100px";
            imageItem.get_element().style.height=     "200px";
     }
    }

    Of cource you can set only WIDTH, or only HEIGHT, or both. However, constraining image proportions (which is default behavior) will guarantee excellent user experience for the end users using this control.

     

    Hope this helps