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

Posted 2023-02-25

【中文标题】图像未扩展表格单元格的宽度

【英文标题】：Image not extending width of table cell

【发布时间】：2013-11-25 13:39:01

【问题描述】：

我有一张图片位于表格的单元格中。表格集的宽度为 604 像素，高度为 379 像素。我将图像 css 设置为宽度：自动和高度：自动。这不是拉伸图像以占据单元格的全部空间。如果我将图像设置为宽度：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>

【问题讨论】：

宽度：100%；有效，但是 .img width: 100%; 未分配给任何图像/标签。

当我使用 100% 的宽度时，它会将我的单元格拉伸到超过宽度：604 像素和高度：379 像素。这就是为什么 .img 标记没有分配给任何东西的原因，因为我对其进行了测试，当我看到它是如何拉伸单元格时，我改变了图像的样式。

我更新了代码来尝试解决这个问题。高度现在不起作用。

【参考方案1】：

尝试使用

style="width:inherit; height:inherit"

可能有用

【参考方案2】：

我不确定

width: inherit; height: inherit;

会起作用，否则你需要在你的单元格中用宽度和高度做一些事情。 :)

【参考方案3】：

修改css规则——

.imgsecond
    
       width: auto;
       height: auto;
    

到 -

.imgsecond
    
       width: inherit;
       height: inherit;
    

这应该可以解决问题。在样本上进行了测试，效果很好。

【讨论】：

我尝试使用它，但我仍然没有看到图像延伸到单元格的整个空间。