ASP.NET：Internet Explorer 和 Firefox 之间的 Gridview 图像问题

Posted 2023-04-01

【中文标题】ASP.NET：Internet Explorer 和 Firefox 之间的 Gridview 图像问题

【英文标题】：ASP.NET: Gridview image issue between Internet Explorer and Firefox

【发布时间】：2020-10-15 19:50:05

【问题描述】：

我的 asp.net webforms 页面上有一个 gridview 来显示图片：

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

我使用以下 css 来显示以不同纵横比居中的图像：

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

这适用于 Mozilla Firefox：

但不在 Internet Explorer 11 下： 图像被大量垂直拉伸。我是否错过了 CSS 中的某些内容，或者 Internet Explorer 是否有其他提示？ min-height: 1px我试过不成功...

【问题讨论】：

如果你只想水平居中，为什么要设置高度？

你到底是什么意思？身高：75%？我这样做是因为原始尺寸太大。问题是图片以 16:9 格式作为示例显示为大约。 3:9（如屏幕截图所示）。他们实际上是朝错误的方向伸展的，@Homungus

【参考方案1】：

要使图像居中并保持宽高比，只需设置宽度 - 在您的情况下高度无关紧要，因为您正在滚动容器：

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

【参考方案2】：

实际上高度和宽度是百分比。因此，根据实际尺寸，高度和宽度图像在浏览器中有所不同，请参阅 this tutorial 。高度和宽度根据需要固定或取消：

.myImage 
    display: block;
    margin-left: auto;
    margin-right: auto;    
    cursor: pointer;
    padding: 5px;