greg_baka — 2012-10-27T11:14:52-04:00 — #1
Working on a Responsive website using Twitter Bootstrap. The code below works exactly like I want it to in Firefox and Chrome.:) 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?
<!-- Horizontal strip of images at the top of the page -->
<div class="container-fluid" style="text-align:center">
<img src="picture-one.jpg" width="80%" >
<img src="picture-two.jpg" width="40%" >
<img src="picture-three.jpg" width="40%" >
<img src="picture-four.jpg" width="80%" >
greg_baka — 2012-10-27T12:27:06-04:00 — #2
Just figured it out for myself
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...
ralphm — 2012-10-27T20:16:40-04:00 — #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.