Images in responsive design: OK in Firefox & Chrome, wrong size in IE?

HTML & CSS
1

Help!

Working on a Responsive website using Twitter Bootstrap. The code below works exactly like I want it to in Firefox and Chrome.:slight_smile: But the images are not the right size in IE9.:mad:

It appears that while in Firefox and Chrome that the image’s < width=“40%” > specification is displaying the image at 40% of the division’s current width (which is the method I want), but that in IE is displaying the image at 40% of the image’s original width (which is not what I want).

How do I fix this? :confused:

<!-- Horizontal strip of images at the top of the page –>
<div class=“container-fluid” style=“text-align:center”>
<div class=“row-fluid”>
<div class=“span12”>
<div class=“row-fluid”>

         &lt;div class="span4"&gt;
           &lt;img src="picture-one.jpg" width="80%" &gt;
         &lt;/div&gt;

         &lt;div class="span4"&gt;
           &lt;img src="picture-two.jpg" width="40%" &gt;
           &lt;img src="picture-three.jpg" width="40%" &gt;
         &lt;/div&gt;

         &lt;div class="span4"&gt;
           &lt;img src="picture-four.jpg" width="80%" &gt;
         &lt;/div&gt;

     &lt;/div&gt;
     &lt;/div&gt;
     &lt;/div&gt;
 &lt;/div&gt;
2

Just figured it out for myself :slight_smile:

In case anybody else has the same problem, here is the solution: To be responsive you need to set the width in a style statement, not a generic html width statement.

So it should be like this: <img src=“picture-two.jpg” style=width:40%;" >
and NOT like this: <img src=“picture-two.jpg” width=“40%” >

I think it originally accidently worked in some of the browsers just because the re-sized images just happened to be close to the desired sizes…

3

Yep, although if you are going to do this a lot, it’s better to use a class and put that in your external style sheet, in case you decide to change it later. :slight_smile: