将照片样式设置为其所在元素的大小

Question

i have made this ListView, that has a photo in it:

this is a <ul> and each person is a <li> , inside each <li> there is a <table> and the photo is in one <td> and the name and the buttons are in the other <td> .

now as you can see the photo isnt the size of the <li> . it's smaller. the <li> 's height is determined by the name and the buttons size.

here is my code:

<ul style="width:250px; word-wrap: break-word; overflow:auto; max-height:100px;">
<asp:ListView ID="FriendRequests" runat="server" GroupItemCount="1" OnItemDataBound="FriendRequests_ItemDataBound">
<LayoutTemplate>
<div style="border-bottom:1px solid #33b3b7; font-size:9px;">Friend Requests:</div>
<asp:PlaceHolder ID="groupPlaceHolder" runat="server" />
</LayoutTemplate>
<GroupTemplate>
<li>
<table cellpadding="0" cellspacing="0">
<tr valign="top" >
<asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
</tr>
</table>
</li>
</GroupTemplate>
<ItemTemplate>
<td title='<%# Eval("email") %>'>
<img style="border:1px solid gray"  Width="35px" Height="35px" src='<%# Eval("photo") %>' />
</td>
<td align="center" title='<%# Eval("email") %>'>
<asp:HyperLink ID="Link1" runat="server" CssClass="LinkToUser">
<span style="font-size:14px; text-decoration:underline;"><%# Eval("name") %></span><br />
</asp:HyperLink>
    <asp:Button ID="Accept" Font-Size="9px" runat="server" Text="Accept"/>
    <asp:Button ID="Button2" Font-Size="9px" runat="server" Text="Deny"/>
</td>
</ItemTemplate>
</asp:ListView>

I want that the photo's height will be the height of the <li> and the width to be the same as the height .

How can i do this?

*i only know javascript, html and asp.net so in your solution please use those. Thanks for the help

Answer 1

Give in image style as

height:100%;
width:100%;

Check this fiddle . Though the image is invalid it has the width of the div it is contained in.

This will make the image as large as the container is or in other words the image will spread to 100% x 100% of the container.

Please let me know if this was helpful.

Answer 2

Define

li {
 width:100px;
 height:100px;}

li img {
 width:100%;
 height:100%;}