我如何使HTML图像响应？ [英] How do I make an html image responsive?

问题描述

我有一个html图片。它是我的标志，然后在右上角是社交媒体的链接。
我已经获得了图片，但是当我重新调整屏幕大小时，它的响应与其他所有内容一样。

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.

这就是我的; p>

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?

推荐答案

在你的css文件中加入：

Add this in you'r css file :

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

这会影响所有img元素。
更具体一些，你可以使用一个特定的id：

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

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

请参阅： http://www.w3schools.com/css/css_rwd_images.asp

这篇关于我如何使HTML图像响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！