Need help? Check out our Support site, then


Vertically stretched images in IE

  1. Hi everyone!
    I have an issue with the images in my blog when view it in IE (IE 8 to be precise) - they are stretched vertically. In Safari, Google Chrome and Firefox everything looks fine.
    I've spent couple of weeks already to figure out the solution. I noticed that when I send my posts via e-mail, the system somehow fixes this problem automatically and posts look nice everywhere, but when I download images in "New post" field through "Add media" icon - they don't. I wouldn't mind to send posts via e-mail all the time... but the last time it just didn't work - no images displayed at all.. I tried twice - same result.
    So, the search on forums led to a couple of solutions - put compatibility code and put specific code for images. To my surprise my theme (I'm using Chateau) already has these codes. Below is the code for images, which is supposed to work exactly the way I want.

    /* Images */
    .post-entry img {
    border: 1px solid;
    border-color: #ddd #ccc #ccc #ddd;
    height: auto;
    left: -4px;
    max-width: 100%;
    padding: 3px;
    position: relative;
    -moz-box-shadow: 4px 4px 12px #ccc;
    -webkit-box-shadow: 4px 4px 12px #ccc;
    box-shadow: 4px 4px 12px #ccc;
    }
    img[class*="align"],
    img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
    }
    img.size-full {
    max-width: 100%;
    width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
    }

    As you may guess, it doesn't work properly for some reasons.
    Can anyone please advice me how to fix it?

    The blog I need help with is getvelvet.org.

  2. Can you please send us a screenshot of the problem showing the entire browser window so we can see what you are seeing?
    http://en.support.wordpress.com/make-a-screenshot/

  3. I've downloaded screenshots of couple of pictures both in IE and Safari to my media library:
    IE - image 1: http://getvelvet.org/?attachment_id=285
    IE - image 2: http://getvelvet.org/?attachment_id=286

    Safari - image 1: http://getvelvet.org/?attachment_id=287
    Safari - image 2: http://getvelvet.org/?attachment_id=288

    The post I am talking about is:
    http://getvelvet.org/2012/10/11/grand-designs-live-part-3/

  4. Thank you for posting screenshots! I will research this issue, but please also note that IE8 is an outdated browser and issues that affect current, up-to-date browsers will get priority. I'll post back as soon as I have more information.

  5. I took a quick look myself to see what I could find, and I noticed that the rule you mentioned from Chateau's stylesheet is setup to work on images that have a class of "size-full":

    img.size-full {
    max-width: 100%;
    width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
    }

    And the images in the http://getvelvet.org/2012/10/11/grand-designs-live-part-3/ post are using a class of "size-large". Can you try inserting some of the images as full width instead of large to see if that fixes the problem for you in IE8?

  6. Were you able to try switching the images to large instead of full size as a test?

    Note that you may also be able to add a CSS rule just like the IE8 one you mentioned using "img.size-large" to work around this issue.

    If you need further help, please reply back here to let us know what you've tried already.

  7. Hi! sorry!
    I remember that I was posting my reply here - it should be glitch in the system that it never appeared.
    Yes I did tried and it resolved my issue - Thank you very much!
    Understood re large images. Thank you!

  8. No worries at all. Thanks tons for the follow-up post!

Topic Closed

This topic has been closed to new replies.

About this Topic