asp.net - 网格视图中的图像

Question

在过去的几周里，我一直在玩这个，但现在我变得绝望了。我的 default.aspx 中有一个非常简单的 GridView，它显示来自基于服务器的文件夹中的图像。

我将它们显示在 gridivew 中，并将宽度和高度设置为 300px；所以它创建了一个 300 x 300 像素的正方形，就像它应该的那样。

但这会使图像裁剪为 300x300 像素，但我希望图片具有原始大小并带有溢出：隐藏；

我试图通过图像字段上的 css 添加它，但没有发生任何事情。

<asp:GridView ID="GridView1" 
runat="server" 
AutoGenerateColumns="False"
ShowHeader="False"
>
<Columns>

    <asp:ImageField DataImageUrlField="value">
        <ControlStyle CssClass="test" Height="300px" Width="300px" />
        <HeaderStyle Width="300px" />
        <ItemStyle Height="300px" Width="300px" />
    </asp:ImageField>
</Columns>
</asp:GridView>

CSS

 .test{
        overflow:hidden;
    }

Answer 1

将 img 更改为 div 并使用图像作为背景如何：

<asp:GridView ID="GridView1" 
runat="server" 
AutoGenerateColumns="False"
ShowHeader="False"
>
<Columns>
    <asp:TemplateField>
    <ItemTemplate>
        <div style="background-image:url(<%# Eval("value") %>);width:300px;height:300px;background-repeat:no-repeat;"></div>
    </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>