圖像不擴展表格單元的寬度

我有一個圖像在表格的單元格中。表格集的寬度爲604px，高度爲379px。我將圖像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>

來源

2013-11-25 user2815584

寬度：100％;作品，但.img {寬度：100％; }未分配給任何圖像/標籤。 – ViliusL

當我使用寬度100％時，它將我的單元格拉伸至寬度以上：604px和高度：379px。這就是爲什麼.img標籤沒有分配給任何東西，因爲我測試了它，當我看到它是如何延伸細胞時，我改變了圖像的樣式。 – user2815584

我更新了代碼以嘗試修復此問題。現在高度不工作。 – user2815584

使用

style="width:inherit; height:inherit"

可能工作

來源

2013-11-25 13:40:52 Anobik

我不知道如果

width: inherit; height: inherit;

會的工作，否則，你需要做的事情與寬度你的嘗試和高度。 :)

來源

2013-11-25 13:44:18 MikaldL

修改CSS規則 -

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

到 -

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

這應該可以解決這個問題。測試樣本並運行良好。

來源

2013-11-25 14:22:43 Divya

我嘗試過使用這個，但是我仍然沒有看到圖像在整個單元格中延伸。 – user2815584

圖像不擴展表格單元的寬度

回答

相關問題