How can I avoid an image being stretched on a mobile device

  • Profile Image
    fhpw
    Asked on April 30, 2015 at 11:58 PM

    When viewing my form in portrait mode on my mobile device the image is stretched.  Is there a way to avoid the some images filling the media screen, while allow other images to respond?

    The image show is too large.  

     

    Thanks,

     

    Form Link: https://secure.jotformpro.com/form/51174046122949

     

     

     

  • Profile Image
    Sammy
    Answered on May 01, 2015 at 09:46 AM

    Hi,

    You can try limiting the width of the image you don't want expanded by applying specific widths to them.

    Goto Setup & embed -> designer

    Goto the CSS tab, click on the image wizard whose size you want to limit, when you click the element a CSS class will be added automatically, add a width property of 50% i.e width: 50% !important;

    Save and test the preview

     

  • Profile Image
    fhpw
    Answered on May 01, 2015 at 02:15 PM

    Hi Sammy,

     

    It worked but changed the ratio.  Also, it changed the top banner, which I do want stretched. 

    I will just leave it as is.

     

    Thanks,

     

  • Profile Image
    Mike_G
    Answered on May 01, 2015 at 04:06 PM

    In addition to what Sammy had suggested, you can also try to add this codes inside the #cid_18{}. 

    display: block; max-width:230px; max-height:95px; width: auto; height: auto;

    You may, of course, set the max-width and max-height to your own preference.

    Let us know if this doesn't help still or if you just want to stick with how it looks right now and leave it as it is just like you have said above.