IMAGES NOT AUTO-SCALING in IE, FIREFOX

10 posts from 3 voices

• Started 9 months ago by sarwiya
• Latest reply from Dude
• This topic is not a support question

Tags:

No tags yet.

1. 

   sarwiya
   Member

   Hi,

   I just noticed the images I inserted in some of my portfolio entries doesn't seem to be auto scaling in IE9 and FIREFOX 12.

   One project has images over-scaling to the left: http://sarwiya.com/work/projects/primus/
   Other over-scaling to the right: http://sarwiya.com/work/projects/lifestyle-you/

   Is there something I need to fix to make this work in IE and FIREFOX... This issue is not there in Android, Iphone, Chrome and Safari

   Posted 9 months ago #
2. 

   Devin
   Moderator

   Hi sarwiya,

   When inserting images into the body of your posts only use thumbnails that are a max of 930px wide. That should eliminate the issues in the other browsers that don't support the auto scaling based on containers.

   Regards,

   Devin

   Posted 9 months ago #
3. 

   sarwiya
   Member

   I found a way to fix it... The images had specific width and height in the embed codes...
   so I tried changing it to : width="100%" height="100%"

   This did the trick and fixed it :-) Thanks anyways Devin

   Posted 9 months ago #
4. 

   sarwiya
   Member

   Sorry I am back. I though I fixed the issue by adding 100% dimensions in IMG TAG: width="100%" height="100%" :
   Full image embed code is like this:

   

   Now this works fine in IE and FIREFOX but gets screwed up in ANDROID, IPHONE,CHROME and SAFARI.
   View the pages with difference scaling happening.

   Image attachment which are working fine ONLY in ANDROID, IPHONE,CHROME and SAFARI : http://www.http://sarwiya.com/work/projects/lifestyle-you/

   Image attachment which are working fine ONLY in IE and FIREFOX: http://www.sarwiya.com/work/projects/staircase/

   I tried making the image size 930px wide but doesnt help... The images still overscales in IE, FIREFOX but works fine in rest of the browsers/ devices.
   Any fix? :-)

   Posted 9 months ago #
5. 

   sarwiya
   Member

   I wanted to show you the full HTML code of the image inserted but its showing the whole image above. I hope you will be able to view the code :-)

   Posted 9 months ago #
6. 

   Devin
   Moderator

   As far as I know, you should be able to just insert the image with the upload/insert icon through Wordpress and not have any issue. In the image dialog box you can set the size/scale to fit your needs and if need be, set the image to a smaller size.

   Posted 9 months ago #
7. 

   sarwiya
   Member

   I have use insert image from WordPress only... Added margin etc through its advanced settings tab in insert image dialogue.

   Posted 9 months ago #
8. 

   Devin
   Moderator

   Well, you can add a css rule only for IE and FF so that the images get a 100% attribute and then scale with:
   

   .firefox img, .firefox a img {
     width: 100%;
   }
   
   .msie img, .msie a img {
   width: 100%;
   }

   Regards,

   Devin

   Posted 9 months ago #
9. 

   sarwiya
   Member

   Hi,
   This solution did work but it scaled up every image IMG tag. So all the images inserted in posts, image icons I had inserted in navigation etc got scaled up to 100% aswell. So I tried stripping all the other details in the IMG tag and made it simplest IMG tag and it worked like a charm. Now all I have is something like this:

   

   Works perfect on all browsers now. :-)

   Posted 9 months ago #
10. 

    Dude
    Dude

    Hi!

    Glad that you solved the issue :)

    Best regards,
    Peter

    Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.