Images Crushed When Viewed in IE8

Question

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

Answer 1

It is not possible to understand why you are adding a max-width declaration to your global img tag. Remove this and all your images will flow normally:

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

Answer 2

This is because of you max-width: 100% style max-width: 100% , you apply the img tag. In your case it is 23px, and this is because its parent .node .field-name-field-op-main-image has float: left , this means that it will act as an inline element (but will not take into account the width of your image or maybe you will set the image width later). In other words, delete either float:left or max-width:100% and you will get the desired result

Answer 3

I'm late for this party, but I just ran into this problem myself, and just removing the max-width or non-floating parent was not parameters. As a result, I had to find a real solution: just add width:auto; , eg:

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

Ironically worked wonderfully in every browser, but Chrome 20, which then began to behave like IE8. Therefore, I applied the CSS hack for IE8 only:

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

Now, before everyone leaves the game, I selected the CSS hack because I am making this particular change to the Bootstrap CSS Framework reset, which already uses hacks in other places. If you want to follow the white hat, you can simply add a conditional comment to your HTML:

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

One more note: if you use the hacked * .less file above, you need to escape from it, or the LESS compiler will choke it:

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

Answer 4

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

Bugfix: adding min-width: 46px; causes IE8 to display the correct width without disrupting other browsers.