如何让 html 图像具有响应性？
2016-01-08
910
我有一个 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>
请问我哪里做错了？
2个回答
在您的 css 文件中添加此代码：
img {
width: 100%;
height: auto;
}
这将影响所有 img 元素。 更具体地说，您可以使用特定的 id，例如：
#headerhj img {
width: 100%;
height: auto;
}
wmehanna
2016-01-08
例如，您必须使用带有
<style>
标签或内联
<img style="width:100%">
的 CSS
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>
通常，为了使用百分比，父容器必须具有硬编码值，即使它是其他值的百分比，也不确定此原则如何应用于表格
查看
min-width
max-width
和
width
以及百分比和
auto
neaumusic
2016-01-08