Question

我在asp.net gridview中使用了img src，它从DB和itworks加载图像，但问题是我想在点击时在屏幕上显得更大，但我无法实现。我写了一个代码来缩放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';
        }

Answer 1

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

例如，如果您的图片代码包含课程.enlarge：

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

}

您可以查看此网站了解具体信息：

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

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

1 个答案: