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

Question

我已经在asp.net gridview中使用img src，它从数据库和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