如何讓HTML圖像響應？

我有一個html圖像。它是我的標誌，然後在右上角是社交媒體的鏈接。我已經得到了圖像，但是當我重新調整屏幕大小時，它的響應與其他所有內容一樣。如何讓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>

請問我哪裏出錯了？

來源

2016-01-08 Joseph Thomas Mallinson

您的示例中沒有圖像 – neaumusic

已更新我的問題。 –

您需要使用CSS，而不僅僅是''和/或''上的HTML來查看最小寬度的最大寬度和最大寬度百分比，而不僅僅是HTML中的硬編碼 – neaumusic

在找你的CSS文件中添加此：

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

這將影響所有IMG元素。更具體的，你可以使用特定的ID，如：

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

見：http://www.w3schools.com/css/css_rwd_images.asp

來源

2016-01-08 20:38:22 wmehanna

它可以工作，但是高度有問題。它離開了網頁頂部的巨大差距。 –

你將不得不使用CSS與<style>標籤或在線<img style="width:100%">例如

它看起來像你硬編碼<img>寬度和高度，所以他們不會迴應，因爲他們不是由包含的百分比驅動<td>

通常情況下，才能使用百分比，父容器必須有一個硬編碼值，即使它是別的東西，不知道這個原則如何應用到表

百分比看看min-widthmax-width和width百分比和auto

來源

2016-01-08 20:49:17 neaumusic

如何讓HTML圖像響應？

回答

相關問題