ASP.NET WebForms: Image Sizemode in Repeater Control

Question

Is it possible to display pictures with a non-square aspect ratio in a repeater control element? I load images from a datatable with paths as strings. But all images are stretched to 450px x 450px.

Code:

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

I miss the SizeMode property of WinForms:/ Maybe someone has a hint for me:)

Answer 1

In web forms, you'll probably want to handle image display with CSS. As you've seen, width and height properties will just force a specific value. There is also a property called ImageAlign, but I'm not sure how much that helps you. Otherwise its up to CSS pretty much.

Answer 2

CSS was the right keyword:) I was able to fix the problem with my own css class:

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

and remove the (forced) height and width of the image/imagebutton:

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

Final look of the loaded pictures: Thank you, @erastl:)