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> <的百分比的驱动/ p>

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

以百分比和min-width

查看max-width width和auto

如何使html图像响应？

2 个答案: