Im working on a new website, /, and for some weird reason, all my images are being squeezed!!!!!. I have spent the last few hours trying to solve the problem to no avail. Any help would be great! Thanks.

Im working on a new website, http://blgz.co/, and for some weird reason, all my images are being squeezed!!!!!. I have spent the last few hours trying to solve the problem to no avail. Any help would be great! Thanks.

• javascript
• css
• drupal
• internet-explorer-8
• image

4 Answers 4

Can't figure out why you're adding the max-width declaration to your global img tag. Remove that and all your images will flow normally:

img {
    height: auto;
    max-width: 100%; /* remove */
}

This is because of you max-width: 100% style, you're applying to img tag. In your case it is 23px only and this is because its parent .node .field-name-field-op-main-image has float: left, this means it will act as a inline element (but won't take into account width of you image or probably you set your image width later). In other words remove either float:left or max-width:100% and you will get the "desired" result

I'm late to this party, but I just ran into this issue myself, and simply removing max-width or not floating the parent element were not options. As a result, I had to find a real solution: just add width:auto;, e.g.:

img {
    height: auto;
    width: auto;
    max-width: 100%;
}

That ironically worked wonderfully in every browser but Chrome 20, which then began to behave as IE8 used to. So I resorted to a CSS hack to target IE8 only:

img {
    height: auto;
    width: auto\0/;
    max-width: 100%;
}

Now before everyone freaks out, I chose a CSS hack because I'm making this particular change in the Bootstrap CSS Framework's reset, which already uses hacks in other places. If you want to go the white-hat route, then you can simple add a conditional ment to your HTML:

<!--[if !IE 8]>
    <style type="text/css">
        img { width: auto; }
    </style>
<![endif]-->

One more note, if you're using the hack above in a *.less file, you have to escape it or the LESS piler will choke on it:

width: e('auto\0/');

In my case for some reason IE8 did not want to obey the explicit width: 46px; CSS.

Fix: Adding min-width: 46px; forces IE8 to render the correct width without breaking other browsers.