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

Question

我制作了这张ListView，里面有一张照片：

这是一个<ul>，每个人都是<li>，每个<li>内都有一个<table>，照片在一个<td>中名称和按钮位于另一个<td>中。

现在您可以看到照片的大小不是<li>。它更小。 <li>的高度由名称和按钮大小决定。

这是我的代码：

<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>

我希望照片的高度为height的{​​{1}}，<li>的{​​{1}}与width相同。

我该怎么做？

*我只知道javascript，html和asp.net所以在你的解决方案中请使用它们。谢谢你的帮助

Answer 1

将图片样式设为

height:100%;
width:100%;

检查fiddle。虽然图像无效，但它包含的div的宽度为。

这将使图像与容器一样大，换句话说，图像将扩散到容器的100％x 100％。

如果这有用，请告诉我。

Answer 2

定义

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

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