图像未占据 <td> 的整个宽度答案

【问题标题】：Image not taking up entire width of <td>图像未占据 <td> 的整个宽度
【发布时间】：2013-11-19 01:32:17
【问题描述】：

我有一张桌子，那张桌子上有一张图片。图像没有占据所在行的整个高度和宽度。我已将 img 设置为 100% 的宽度和高度，但没有任何效果。下面是我的代码。

<style type="text/css">
    .style1
    {
        background-color: #c1b7a6;
        width: 40%;
        padding-left: 1.5em;
    }
    .style2
    {
        background-color:#7f6d53;
        width: 40%;
        padding-left: 1.5em;



    }
    .style3
    {
        background-color:#5e513d;
        width: 40%;
        padding-left: 1.5em;
      }
      .style4
      {
          outline: #5c492d solid 2px;             
          width: 100%;
      }
          .style5
          {
              border-right: 2px solid #5c492d;

        }
        .style6
        {
            padding-left: 1.5em;
        }
        .style7
        {
            background-color: #7f6d53;
            outline: #5c492d solid 2px;
        }
        .style8
        {
           width:100%;
           height: 100%;
           display: block;
        }
        .img
        {
           height:100%;
        width: 100%;


     } 

     </style>

      <div align="center" >
    <table class="style4" cellpadding= "0px" cellspacing= "0px">

      <tr>
     <td rowspan="3" align="left" valign="top" class="style5" >
     <img id="imgMain" src="Images/Logo" class="img" />

    </td>

    <td   align="left" valign="top" class="style1">  <asp:Image ID="imgText" runat="server" />
    </td>
    </tr>

    <tr>
     <td  align="left" valign="top" class="style2" ><asp:Label ID="lblSum" runat="server"  Text="Label" ForeColor="Black"></asp:Label>
    </td>
  </tr>

  <tr>
    <td  align="left" valign="top" class="style3"> <asp:Label ID="Label5" runat="server"    Text="Refine Your Results By" 
                  Font-Names="KozGoPr6n-Bold" ForeColor="#F9B92D"></asp:Label>
              <br />


          &nbsp;<asp:Button ID="Button1" runat="server" Text="Button" />
    </td>
  </tr>

    </table>

欢迎提出任何建议！

【问题讨论】：

您已将padding 设置为单元格。

标签： html css html-table

【解决方案1】：

尝试以下方法：

table td {padding: 0px; margin: 0px;}
table {border-spacing: 0px;}

和：

img {display: block;}
img {vertical-align: bottom;}

（这是因为不同浏览器的边距/填充）

抱歉，我发现您的问题难以阅读，而且数字风格完全让我迷失了方向！但上述方法过去曾在类似的解决方案中为我工作过。

【讨论】：

【解决方案2】：

尝试将图像边框设置为无。

【讨论】：

【解决方案3】：

您的图像可能被 ASP 代码设置为特定宽度。尝试使用 !important：

.img
    {
        height:100% !important;
        width: 100% !important;
    }

【讨论】：

因为应该避免使用!important。这是由于另一个可以修复的问题，而不是 !important
确实，问题应该在 ASP 代码中解决，我对此一无所知。这只是一个快速而肮脏的 CSS 修复。