I am facing an issue with the image in a table cell. The table has a width of 604px and a height of 379px, but the image is not stretching to occupy the full space of the cell even though I have set its CSS properties to width: auto and height: auto. If I change the image width to 100%, it stretches the cell beyond the desired width. Any suggestions on how to resolve this problem? Below are the CSS and HTML codes for reference. The td cell's style is defined as 'cellfive' in the CSS and the image is 'imgsecond'.
Thank you.
<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>
<asp:DropDownList ID="ddlStyleQ" runat="server" Width="30%" >
</asp:DropDownList>
<br />
<asp:DropDownList ID="ddlApplication" runat="server" Width="30%" >
</asp:DropDownList>
<asp:DropDownList ID="ddlCollections" runat="server" Width="30%">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" />
</td>
</tr>
</table>