如何使html图像响应？

Question

我有一个html图像。 它是我的徽标，然后在右上角是社交媒体的链接。 我已经准备好了图像，但是当我调整屏幕大小时，它没有像其他所有东西一样反应灵敏。

这就是我所拥有的；

<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>

请问我哪里出问题了？

Answer 1

将此添加到您的css文件中：

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

这将影响所有img元素。 具体来说，您可以使用以下特定ID：

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

看到： http : //www.w3schools.com/css/css_rwd_images.asp

Answer 2

例如，您将必须使用带有<style>标记的CSS或内联<img style="width:100%">

看来您正在硬编码<img>宽度和高度，因此它们不会响应，因为它们不受包含的<td>百分比的驱动

通常，为了使用百分比，父容器必须具有硬编码的值，即使它是其他值的百分比，也不确定此原理将如何应用于表

看看min-width max-width和width以及百分比和auto