ASP.NET WebForms：Repeater 控件中的图像尺寸模式

Posted 2023-03-06

【中文标题】ASP.NET WebForms：Repeater 控件中的图像尺寸模式

【英文标题】：ASP.NET WebForms: Image Sizemode in Repeater Control

【发布时间】：2020-10-13 14:18:52

【问题描述】：

是否可以在转发器控件元素中显示具有非方形纵横比的图片？ 我从带有路径作为字符串的数据表中加载图像。 但所有图片都被拉伸到 450px x 450px。

代码：

    <div style="width: 500px; height: 500px; overflow: auto;">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial">
            <Columns>
                <asp:TemplateField HeaderText="IMS-Bilder">
                    <ItemTemplate>
                        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("Bild-Pfad")%>'
                            Width="450px" Height="450px" Style="cursor: pointer" ImageAlign="Middle" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>

我想念 WinForms 的 SizeMode 属性：/ 也许有人对我有提示:)

【问题讨论】：

你的预期输出是什么？

您可以在转发器中放置您想要的任何标记。

最好是方形图片框，其中不同纵横比的图片居中显示。例如灰色背景，@SelimYıldız

【参考方案1】：

在网络表单中，您可能希望使用 CSS 处理图像显示。如您所见，宽度和高度属性只会强制一个特定值。还有一个名为 ImageAlign 的属性，但我不确定它对您有多大帮助。否则它几乎取决于 CSS。

【参考方案2】：

CSS 是正确的关键字 :) 我能够用自己的 css 类解决问题：

        .myImage 
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 75%;
            height: 75%;
            cursor: pointer;
        

并删除图像/图像按钮的（强制）高度和宽度：

    <div style="width: 1000px; height: 1000px; overflow: auto;">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial">
            <Columns>
                <asp:TemplateField HeaderText="IMS-Bilder">
                    <ItemTemplate>
                        <asp:Image CssClass="myImage" ID="Image1" runat="server" ImageUrl='<%# Eval("Bild-Pfad")%>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>

加载图片的最终外观： 谢谢你，@erastl :)