CODEWITHSUNDEEP
htmlresponsive-design
Joseph Thomas Mallinson
Joseph Thomas Mallinson

Reputation: 219

How do I make an html image responsive?

I have an html image. Its my logo and then in the top right corner is a link for social media. I have got the image in place but when I re-size my screen its not responsive like everything else is.

This is what I have;

<div id="headerhj" align="center">
  <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" max-width="100%">
    <!-- fwtable fwsrc="header html.fw.png" fwpage="Page 1" fwbase="main.jpg" fwstyle="Dreamweaver" fwdocid = "2088656467" fwnested="0" -->
    <tr>
      <td><img src="img/htm/spacer.gif" alt="" name="undefined_2" width="815" height="1" /></td>
      <td><img src="img/htm/spacer.gif" alt="" name="undefined_2" width="25" height="1" /></td>
      <td><img src="img/htm/spacer.gif" alt="" name="undefined_2" width="6" height="1" /></td>
      <td><img src="img/htm/spacer.gif" alt="" name="undefined_2" width="24" height="1" /></td>
      <td><img src="img/htm/spacer.gif" alt="" name="undefined_2" width="1" height="1" /></td>
    </tr>
    <tr>
      <td rowspan="2"><img src="img/htm/main_r1_c1.jpg" alt="" name="main_r1_c1" width="815" height="171" id="main_r1_c1" align="middle" /></td>
      <td><a href="www.facebook.com"><img name="main_r1_c2" src="img/htm/main_r1_c2.jpg" width="25" height="24" id="main_r1_c2" alt="" /></a></td>
      <td rowspan="2"><img name="main_r1_c3" src="img/htm/main_r1_c3.jpg" width="6" height="171" id="main_r1_c3" alt="" /></td>
      <td><a href="www.twitter.com"><img name="main_r1_c4" src="img/htm/main_r1_c4.jpg" width="24" height="24" id="main_r1_c4" alt="" /></a></td>
      <td><img src="img/htm/spacer.gif" alt="" name="undefined_2" width="1" height="24" /></td>
    </tr>
    <tr>
      <td><img name="main_r2_c2" src="img/htm/main_r2_c2.jpg" width="25" height="147" id="main_r2_c2" alt="" /></td>
      <td><img name="main_r2_c4" src="img/htm/main_r2_c4.jpg" width="24" height="147" id="main_r2_c4" alt="" /></td>
      <td><img src="img/htm/spacer.gif" alt="" name="undefined_2" width="1" height="147" /></td>
    </tr>
  </table>
</headerhj>

Where have I gone wrong please?

Upvotes: 0

Views: 915

Answers (2)

neaumusic
neaumusic

Reputation: 10454

You're going to have to use CSS with a <style> tag or inline <img style="width:100%"> for example

It looks like you're hardcoding the <img> widths and heights, so they won't respond, as they aren't driven by percentages of the containing <td>

Normally, in order to use percentages, the parent container has to have a hardcoded value, even if it's a percentage of something else, not sure how this principle would apply to a table

Take a look at min-width max-width and width with percentages and auto

Upvotes: 1

wmehanna
wmehanna

Reputation: 394

Add this in you'r css file :

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

this will affect all img elements. to be more specific, you can use a specific id like :

#headerhj img {
    width: 100%;
    height: auto;
}

see : http://www.w3schools.com/css/css_rwd_images.asp

Upvotes: 3

Related Questions