How to make the images bigger when clicked?

18 May, 2022
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: 
html
<!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="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 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: 
html
<!DOCTYPE html><html>    <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
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: 
html
<!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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"                 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>
Output: 
Image resize using transform: scale()
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:
CSS Tutorial and CSS Examples
 JavaScript Tutorial and JavaScript Examples
hardikkoriintern
CSS-Misc
JavaScript-Misc
CSS
HTML
JavaScript
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS