Question

我的图像位于表格的单元格中。表格集的宽度为604px，高度为379px。我将图像css设置为width：auto和height：auto。这不是拉伸图像占据细胞的整个空间。如果我将图像设置为宽度：100％，则它会将单元格拉伸到我不想要的宽度。关于如何解决这个问题的任何建议？下面的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"

可能会工作

Answer 2

我不确定是否

width: inherit; height: inherit;

将起作用，否则您需要在单元格中使用“宽度”和“高度”执行某些操作。：）

Answer 3

修改css规则 -

.imgsecond
    {
       width: auto;
       height: auto;
    }

到 -

.imgsecond
    {
       width: inherit;
       height: inherit;
    }

这应该可以解决问题。测试样本并运作良好。

图像不扩展表格单元格的宽度

3 个答案: