Related Articles

Related Articles

How to make the images bigger when clicked?
  • Last Updated : 11 Sep, 2020

There are two commonly used methods which can be used to resize an image when clicked using javascript. The javascript functions can be invoked by specifying the onclick=”function_name()”

Method 1: transform : scale()

Syntax:

object.style.transform = scale(sx);

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

The transform property is used to modify the shape, size or position of an element. By specifying the scale value, the size of the element can be modified as per the given ratio. 
If sy is not provided, its default value is sx, which results in uniform scaling and thus preserving the element’s aspect ratio.

Approach:

  • Get the selector of the required image using .getElementById(selector).
  • Set the ratio by which the image needs to be enlarged using .style.transform = “scale(value)”.
  • Animation effect can be added using .style.transition to give an appealing look.
  • When the function is called using the .onclick() method on the image tab, the size of the image will increase proportionately as per the given scale. 

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  <head>
    <title>Image Resize JS</title>
  </head>
  <body>
    <div class="container" style="text-align: center; margin-top: 5em;">
      <!-- Image to be enlarged and onclick() function call-->
      <img
        src=
        onclick="enlargeImg()"
        id="img1"
      />
      <br /><br /><br />
      <!-- Button to reset the Image size -->
      <button onclick="resetImg()">Reset</button>
    </div>
  
    <!-- script to set display property -->
    <script>
      // 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";
      }
    </script>
  </body>
</html>

chevron_right


Output:
 

Method 2: CSS Height and Width

Syntax:

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

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

The CSS height and width property specify the height and width of the element. Using this we can explicitly define the dimensions we want in the enlarged (or shrunk) image.

Approach:

  • Get the selector of the required image using .getElementById(selector).
  • Set the width/height value the enlarged image should have using .style.width.
  • It is suggested to keep the other dimension value auto, to maintain the aspect ratio of the image.
  • Animation effect can be added using .style.transition to give an appealing look.
  • When the function is called using the .onclick() method on the image tab, the size of the image will change as per the given dimensions.

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <body>
        <div class="container" 
             style="text-align: center; 
                    margin-top: 5em;">
            <!-- Image to be enlarged and
                onclick() function call-->
            <img src=
                 onclick="enlargeImg()" 
                 id="img1" />
            <br />
            <br />
            <br />
            <!-- Button to reset the Image size -->
            <button onclick="resetImg()">Reset
          </button>
        </div>
  
        <!-- script to set display property -->
        <script>
            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";
            }
        </script>
    </body>
</html>

chevron_right


Output:

Passing the image element directly to the function using ‘this’ keyword:

Apart from fetching the required element using its id, one can also pass the reference of the image element (using this keyword) to the function as a parameter and perform the required operations on it. However, for the reset button part, getting the element selector by id is the best option, as passing its reference to the reset function will change the size of the reset button.

Approach:

  • This is similar to the 1st method except that we directly pass the reference to the image as a parameter to the function.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <body>
        <div class="container" 
             style="text-align: center;
                    margin-top: 5em;">
            <!-- Image to be enlarged and onclick() 
            function call
      Passing the reference to this img
             as a parameter    -->
            <img src=
                 onclick="enlargeImg(this)" />
        </div>
  
        <!-- script to set display property -->
        <script>
            // Function to increase image size
            function enlargeImg(img) {
                img.style.transform = "scale(1.5)";
                img.style.transition =
                  "transform 0.25s ease";
            }
        </script>
    </body>
</html>

chevron_right


Output:
 

Supported Browsers: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :