html - 图像未扩展表格单元格的宽度

Question

我有一张图片位于表格的单元格中。表格集的宽度为 604px，高度为 379px。我将图像 css 设置为 width: auto 和 height: auto。这不是拉伸(stretch)图像以占据单元格的整个空间。如果我将图像设置为 width: 100%，那么它会将单元格拉伸(stretch)到我不想要的宽度。关于如何解决这个问题的任何建议？下面的 CSS 和 HTML。 td 单元格在 CSS 中的样式为 cellfive，图像为 imgsecond。

谢谢。

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<meta name="keywords" content="declassified information" />
<style type="text/css">    
.style1
{
    background-color: #c1b7a6;
    width: 339px;
    padding-left: 1.5em;
    height: 88px;
}
.style2
{
    background-color:#7f6d53;
    width: 339px;
    padding-left: 1.5em;
    height: 166px;



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

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

    }
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<p></p>
 <div align="center" >
<table class="style4" cellpadding= "0px" cellspacing= "0px">

 <tr>
<td rowspan="3" align="left" valign="top" class="style5" >
<div style="height:100%; width:100%">
    <asp:Image ID="imgMain" runat="server" CssClass="img"  />
    </div>
</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" Font-Names="KozGoPr6N-Bold"></asp:Label>
   </td>
 </tr>

  <tr>
   <td  align="left" valign="top" class="style3"> <asp:Label ID="Label5" 
        runat="server" Text="Refine Your Results By" ForeColor="#F9B92D" 
        Font-Names="KozGoPr6N-Bold"></asp:Label>
          <br />
          <asp:DropDownList ID="ddlStyle" runat="server" Width="30%" >
          </asp:DropDownList>
          <asp:DropDownList ID="ddlColor" runat="server" Width="30%">
          </asp:DropDownList>
          &nbsp;<asp:DropDownList ID="ddlStyleQ" runat="server" Width="30%" >
          </asp:DropDownList>
          &nbsp;<br />
          <asp:DropDownList ID="ddlApplication" runat="server" Width="30%" >
          </asp:DropDownList>
          <asp:DropDownList ID="ddlCollections" runat="server" Width="30%">
          </asp:DropDownList>

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

</table>

Answer 1

尝试使用

style="width:inherit; height:inherit"

可能有用