How to change the size of Preview Image in Image Upload Preview Widget?

  • Profile Image
    Asked on September 26, 2014 at 12:25 PM

    I am using the Image Upload Preview Widget on my form, but when a user is on their mobile device the huge previewed image does not look good.

    Where can I change this so the preview image is 100px x 150px? Or a percentage may even be better (i.e. 20%)

    It looks like the element is <img id="preview">

    I tried in the width and height settings but that only changes the width of the preview image and not the height.

    Thank you!

  • Profile Image
    Answered on September 26, 2014 at 02:50 PM

    Hi Ellie,

    You were right about the field that you would need to change, but as it had its own default settings applied directly onto it (inline style) we needed to make the change more important than it.

    This is the CSS that would shrink the preview to a size.

       width:150px !important;

    You can see it in action here

    To add the style you should follow these steps:

    I hope this helps you to accomplish what you wanted. You can of course change the width to any other from 150, to for example 200.

    Best Regards,