Geek Answers Handbook

Image resizing does not work in IE8 for bootstrap

I hacked and dug google + stackoverflow, I hope to find an appropriate solution that is related to my problem below, but could not find it:

I am using bootstrap (twitter) ver 2.0 and faced with the fact that image resizing does not work on IE8, but works with other browsers.

Source code for resizing the image:

<img src="alpha1-stamp.png" width="70" height="70">

In a browser, it appears as well as Safari, Firefox and Google Chrome, but not IE8 (the only version I have on another desktop, but I think that it should not work on all versions of IE)

I ask for advice and a desperate need to fix this IE nightmare

Greetings

+4
source share
6 answers

Ok, finally sorted out and found a way to hack boostrap.css file

Just comment the following on bootstrap.css (bootstrap framework)

 /* img { width: auto\9; height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } */
+2
source

Just comment the following on bootstrap.css (bootstrap framework)

 img { width: auto\9; height: auto; /* max-width: 100%;*/ vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }
+1
source

I had a problem with Internet Explorer <8 not respecting the width and height attributes of my img tags and was able to solve the problem by removing only the height:auto rules for the img selector. (removing max-width didn't help)

0
source

If removing some code from bootstrap css did not help, you can try this => fooobar.com/questions/1158986 / ...

As for me, after removing it, my layout in Chrome was hacked the same way as in Mozilla or IE ...

0
source

The problem is width: auto\9; height: auto; width: auto\9; height: auto; If you comment on this line, it works correctly on IE

0
source

I solved it differently by hacking conditional override styles in HTML.

I already had the IE8 workaround section below the boot stylesheet, so I am adding dumps for problematic images:

 <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" /> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <style type="text/css"> img, img.img-responsive { width:auto; height:auto; max-width: none; } </style> <![endif]--> <style type="text/css">
0
source

More articles:


All Articles