Question

我有一张桌子，在那张桌子里面是一张图片。图像没有占据所在行的整个高度和宽度。我已将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>

任何建议都值得赞赏！

Answer 1

尝试以下内容：

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

和

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

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

抱歉，我发现你的问题难以阅读，数字风格完全失去了我！但是上述过去在类似的解决方案中对我有用。

Answer 2

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

Answer 3

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

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

图像不占据整个宽度

3 个答案: