单击时如何从gridview缩放图像？答案

【问题标题】：How to zoom image from gridview when clicked ?单击时如何从gridview缩放图像？
【发布时间】：2016-01-22 19:41:24
【问题描述】：

我在 asp.net gridview 中使用了 img src，它从 DB 加载图像并且它可以工作，但问题是我希望在单击时在屏幕上显得更大，但我无法实现。我写了一个代码来缩放gridview内的图像，但我不想要那样，我想让它在gridview之外显得更大。

<asp:TemplateField HeaderText="Letter Copy">
                                                        <ItemTemplate>
                                                            <img src='../SiteImages/<%# Eval("OutgoingLetterCopy") %>' width="20" height="20"
                                                                onmouseover="ShowFull(this)" onmouseout="ShowActual(this)" />
                                                            <%--<asp:ImageButton ID="btnOutgoingLetterCopy" runat="server" ImageUrl='../SiteImages/<%# Eval("OutgoingLetterCopy") %>' CommandArgument='<%# Container.DataItemIndex %>' ControlStyle-Width="20px" ControlStyle-Height="20px" />--%>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>

代码：

function ShowFull(ctrl) {
            ctrl.style.height = '280px';
            ctrl.style.width = '280px';
        }

        function ShowActual(ctrl) {
            ctrl.style.height = '20px';
            ctrl.style.width = '20px';
        }

【问题讨论】：

标签： javascript jquery asp.net jquery-ui gridview

【解决方案1】：

一种方法是使用 CSS 缩放转换。所以在图像上切换一个 css 类。

例如，如果您的图像标签具有 .enlarge 类：

.enlarge:hover {
transform:scale(2,2);
transform-origin:0 0;

}

您可以查看此网站了解详情：

http://www.cssportal.com/graphics/enlarge-image.php

【讨论】：