将图像插入图像控件（ASP.Net）答案

【问题标题】：Inserting image into Image control (ASP.Net)将图像插入图像控件（ASP.Net）
【发布时间】：2016-07-14 01:57:24
【问题描述】：

我的表单中有一个Datalist，用于在用户上传图像时自动显示图像。

这是我的Default.aspx 用于显示图像：

<asp:DataList Width="100%" ID="imgDataList" runat="server" RepeatColumns="4" CellPadding="10">
    <ItemTemplate>
        <table runat="server" id="tblImgList" border="1" width="100%">
            <tr>
                <td align="center">
                    <a id="Link1" runat="server" href='<%# Eval("Value") %>' target="Default.aspx">
                        <asp:Image ID="imgDisp" ImageUrl='<%# Eval("Value") %>' runat="server" style="height :200px ; width :200px ;" />
                    </a> 
                </td>
            </tr>
            <tr>
                <td align="center">
                    <%# Eval("Text") %>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

对于Image 控件，我已经将高度和宽度设置为200px，因此显示的每个图像都被拉伸以适应200px，看起来不太好。如何显示图像以使其保持原始外观？如果Winsform 它使用Sizemode 属性来调整图片。如果使用Web form application，如何调整？

【问题讨论】：

只使用一个属性，宽度或高度，它会根据图像的大小自动调整其他属性。
@emarald ，尝试使用百分比而不是 px ，以便根据图像调整到屏幕百分比但不会拉伸
@Webruster 确实图像不会拉伸，但这些图像以随机尺寸显示。例如，我对宽度和高度都使用 15%，但显示时第一张图片是 20x50，第二张图片是 45x25
@Emerald 知道了，请检查我的答案并告诉我是否成功
@PiyushKhatri 我在设置height=200px 和width=auto 之前尝试过，当图像的宽度大于我的表格宽度时，表格宽度会自动变宽

标签： asp.net vb.net image

【解决方案1】：

根据我的评论，使用 Percentage 而不是 px 总是更好，这样图像就不会被拉伸。

CSS：

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 -because of Bug in ie8 need to give widht the following way */ 
}

如果你想强制图像的固定最大宽度，只需将它放在一个容器中，例如：

<a style="max-width:500px;">
    <asp:img src="..." />
</a>

【讨论】：

我采用了您的解决方案并稍微编辑了最大宽度。现在工作正常。谢谢:)