单击时如何使图像变大？

有两种常用的方法可用于在使用 javascript 单击时调整图像大小。可以通过指定onclick=”function_name()”调用 javascript 函数

方法一：变换：scale()

句法：

object.style.transform = scale(sx);

object.style.transform = scale(sx, sy);

transform属性用于修改元素的形状、大小或位置。通过指定比例值，可以根据给定的比例修改元素的大小。
如果未提供 s _y ，则其默认值为 s _x ，这会导致统一缩放并因此保留元素的纵横比。

方法：

• 使用.getElementById(selector)获取所需图像的选择器。
• 使用.style.transform = “scale( value )”设置图像需要放大的比例。
• 可以使用.style.transition添加动画效果以提供吸引人的外观。
• 当使用图像选项卡上的.onclick()方法调用该函数时，图像的大小将根据给定的比例按比例增加。  

例子：

  
    Image Resize JS
  
  
    
      
      
      
      
      Reset
    
  
    
    
      // Get the img object using its Id
      img = document.getElementById("img1");
      // Function to increase image size
      function enlargeImg() {
        // Set image size to 1.5 times original
        img.style.transform = "scale(1.5)";
        // Animation effect 
        img.style.transition = "transform 0.25s ease";
      }
      // Function to reset image size
      function resetImg() {
        // Set image size to original
        img.style.transform = "scale(1)";
        img.style.transition = "transform 0.25s ease";
      }
    
  

输出：

方法 2： CSS 高度和宽度

句法：

object.style.width = value(%, px, em, auto, etc);

object.style.height= value(%, px, em, auto, etc);

CSS height 和width 属性指定元素的高度和宽度。使用它，我们可以明确定义放大(或缩小)图像中所需的尺寸。

方法：

• 使用.getElementById(selector)获取所需图像的选择器。
• 使用.style.width设置放大图像应具有的宽度/高度值。
• 建议保留另一个维度值auto ，以保持图像的纵横比。
• 可以使用.style.transition添加动画效果以提供吸引人的外观。
• 当使用图像选项卡上的.onclick()方法调用该函数时，图像的大小将根据给定的尺寸变化。

例子：

    
        
            
            
            
            
            
            
            Reset
          
        
  
        
        
            img = document.getElementById("img1");
            // Function to set image dimensions
            function enlargeImg() {
                img.style.width = "60%";
                img.style.height = "auto";
                img.style.transition = "width 0.5s ease";
            }
            // Function to reset image dimensions
            function resetImg() {
                img.style.width = "40%";
                img.style.height = "auto";
                img.style.transition = "width 0.5s ease";
            }
        
    

输出：

使用“ this”关键字将图像元素直接传递给函数：

除了使用其id获取所需元素外，还可以将图像元素的引用(使用 this 关键字)作为参数传递给函数，并对其执行所需的操作。但是，对于重置按钮部分，通过 id 获取元素选择器是最好的选择，因为将其引用传递给重置函数会改变重置按钮的大小。

方法：

• 这与第一种方法类似，只是我们直接将图像的引用作为参数传递给函数。

例子：

    
        
            
            
        
  
        
        
            // Function to increase image size
            function enlargeImg(img) {
                img.style.transform = "scale(1.5)";
                img.style.transition =
                  "transform 0.25s ease";
            }
        
    

输出：

支持的浏览器：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器