SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

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

    Help!

    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.

    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">
    <div class="row-fluid">
    <div class="span12">
    <div class="row-fluid">

    <div class="span4">
    <img src="picture-one.jpg" width="80%" >
    </div>

    <div class="span4">
    <img src="picture-two.jpg" width="40%" >
    <img src="picture-three.jpg" width="40%" >
    </div>

    <div class="span4">
    <img src="picture-four.jpg" width="80%" >
    </div>

    </div>
    </div>
    </div>
    </div>

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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...

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Greg Baka View Post
    So it should be like this: <img src="picture-two.jpg" style=width:40%;" >
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •