How to make the images bigger when clicked?

Last Updated : 22 May, 2023

In this article, we will make the images bigger when clicked. There are two commonly used methods that 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(): 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.

Syntax:

object.style.transform = scale(sx);

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

If s_yis not provided, its default value is s_x, 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 effects 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: This example shows the above-explained approach.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to make the images bigger when clicked?
    </title>
</head>
 
<body>
    <div class="container" style="text-align: center; 
                                  margin-top: 5em;">
        <!-- Image to be enlarged and onclick() function call-->
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"
             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>

Output:

Image resize using transform: scale()

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 effects 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: This example shows the use of the above-explained approach.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to make the images bigger when clicked?
    </title>
</head>
 
<body>
    <div class="container" style="text-align: center;
                    margin-top: 5em;">
        <!-- Image to be enlarged and
                onclick() function call-->
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"
             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>

Output:

Image resize using style.width

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

CSS is used for webpage development by styling websites and web apps. JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn CSS and Javascript from given links below: