Reducing Image Size in JavaScript Made Easy

Question

Reducing Image Size in JavaScript Made Easy

I need help with a project where I want the image to shrink every time it's clicked until it disappears completely. I'm struggling to achieve this, can someone assist me?

Here is the HTML code I have:

    <html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="main.css">
    <meta charset="utf-8">
    <title>Stupid Project</title>
  </head>
  <body>
    <header class="header-top">
      <h1>Shrink the image</h1>
      <a href="#"></a>
    </header>
    <img src="D:\MATEUS\Programação\Stupid project\images\levi.png" alt="Levi" id="image">
  </body>
</html>
<script type="main/javascript" src="jquery-3.3.1.js"></script>

And here is the CSS code I am using:

@import "variables.css";
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

*
{
  margin: 0%;
  font-family: 'Ubuntu', sans-serif;
  background-color: var(--body-color);
}

.header-top
{
  background-color: var(--body-color);
  height: 49px;

}

.header-top > h1
{
  color: white;
  display: inline-block;
  vertical-align: top;
  margin-left: 10px 10px;
}

#image
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  margin-top: 90px;
  border-radius: 20px;
}

javascript html css

Answer 1

Answer №1

To resize the image on each click, you can follow these steps:

Start by setting the initial scale of the image to 1 using a CSS variable (--scale).
Add an event listener to the image.
When the image is clicked, check the current value of --scale, decrease it by 0.1, if it's not already 0.

    <html lang="en" dir="ltr>
  <head>
    <link rel="stylesheet" href="main.css">
    <meta charset="utf-8">
    <title>Image Resizing Project</title><style>
*
{
  margin: 0%;
  font-family: 'Ubuntu', sans-serif;
  background-color: var(--body-color);
}

.header-top
{
  background-color: var(--body-color);
  height: 49px;

}

.header-top > h1
{
  color: white;
  display: inline-block;
  vertical-align: top;
  margin-left: 10px 10px;
}

#image
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  margin-top: 90px;
  border-radius: 20px;
  transform: scale(var(--scale));
}
</style>
  </head>
  <body>
    <header class="header-top">
      <h1>Resize Image</h1>
      <a href="#"></a>
    </header>
    <img src="https://picsum.photos/id/1016/1024/768" alt="example picture" id="image">
    <script>
    const image = document.getElementById("image");
    image.style.setProperty('--scale', 1);
    image.addEventListener("click", function () {
       const curScale = image.style.getPropertyValue('--scale');
       if (curScale > 0) {image.style.setProperty('--scale', curScale - 0.1); }  
    });
    </script>
  </body>
</html>

Answer 2

To resize the image on each click, you can follow these steps:

Start by setting the initial scale of the image to 1 using a CSS variable (--scale).
Add an event listener to the image.
When the image is clicked, check the current value of --scale, decrease it by 0.1, if it's not already 0.

    <html lang="en" dir="ltr>
  <head>
    <link rel="stylesheet" href="main.css">
    <meta charset="utf-8">
    <title>Image Resizing Project</title><style>
*
{
  margin: 0%;
  font-family: 'Ubuntu', sans-serif;
  background-color: var(--body-color);
}

.header-top
{
  background-color: var(--body-color);
  height: 49px;

}

.header-top > h1
{
  color: white;
  display: inline-block;
  vertical-align: top;
  margin-left: 10px 10px;
}

#image
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  margin-top: 90px;
  border-radius: 20px;
  transform: scale(var(--scale));
}
</style>
  </head>
  <body>
    <header class="header-top">
      <h1>Resize Image</h1>
      <a href="#"></a>
    </header>
    <img src="https://picsum.photos/id/1016/1024/768" alt="example picture" id="image">
    <script>
    const image = document.getElementById("image");
    image.style.setProperty('--scale', 1);
    image.addEventListener("click", function () {
       const curScale = image.style.getPropertyValue('--scale');
       if (curScale > 0) {image.style.setProperty('--scale', curScale - 0.1); }  
    });
    </script>
  </body>
</html>

Answer 3

Answer №2

I managed to solve the issue, and here is an example of the code that fixed it:

HTML:

<button type="button" id="button" onclick="zoomout()">Click Me!</button>
    <img src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image">

CSS:

#image
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  margin-top: 0px;   /* 90px */
  margin-bottom: 10px;
  border-radius: 20px;
  transition: all 1s;
}

#button
{
  color: white;
  margin-left: 570px;
  margin-top: 39px;
  margin-bottom: 0%;
  padding: 15px 32px;
  background-color: var(--button-color);
}

JavaScript:

function zoomout() {
  var pic = document.getElementById("image");
  var currentWidth = pic.clientWidth;
  pic.style.width = (currentWidth - 100) + "px"
}

Answer 4

I managed to solve the issue, and here is an example of the code that fixed it:

HTML:

<button type="button" id="button" onclick="zoomout()">Click Me!</button>
    <img src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image">

CSS:

#image
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  margin-top: 0px;   /* 90px */
  margin-bottom: 10px;
  border-radius: 20px;
  transition: all 1s;
}

#button
{
  color: white;
  margin-left: 570px;
  margin-top: 39px;
  margin-bottom: 0%;
  padding: 15px 32px;
  background-color: var(--button-color);
}

JavaScript:

function zoomout() {
  var pic = document.getElementById("image");
  var currentWidth = pic.clientWidth;
  pic.style.width = (currentWidth - 100) + "px"
}

Answer 5

Answer №3

To gradually decrease the image width by one unit at a time, you can implement a transition effect on the image to visualize the changes.

const img = document.querySelector("img");
const imgWidth = getComputedStyle(img, null).getPropertyValue('width')

document.querySelector("button").addEventListener("click", () => { 
  for (let i = parseInt(imgWidth); i >= 0; i--) {
    img.style.width = `${i}px` 
  }
})

img {
  display: block;
  width: 200px;
  transition: all 1s;
}

button {
  margin-bottom: 5px;
}

<button>Click</button>
<img src="https://images.unsplash.com/photo-1618141411216-96de9f2bd309?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />

Answer 6

To gradually decrease the image width by one unit at a time, you can implement a transition effect on the image to visualize the changes.

const img = document.querySelector("img");
const imgWidth = getComputedStyle(img, null).getPropertyValue('width')

document.querySelector("button").addEventListener("click", () => { 
  for (let i = parseInt(imgWidth); i >= 0; i--) {
    img.style.width = `${i}px` 
  }
})

img {
  display: block;
  width: 200px;
  transition: all 1s;
}

button {
  margin-bottom: 5px;
}

<button>Click</button>
<img src="https://images.unsplash.com/photo-1618141411216-96de9f2bd309?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />

Reducing Image Size in JavaScript Made Easy

Answer №1

Answer №2

Answer №3

Similar questions

Exploring the applications of the `this` keyword within a jQuery-based JavaScript object

Stingray Riverbed SteelApp, showcasing an image on a maintenance landing page

Caution: The file path in node_modules/ngx-translate-multi-http-loader/dist/multi-http-loader.js relies on the 'deepmerge' dependency

Can you provide instructions on how to configure the npm settings to use the current directory in a pre

Updating Hidden Field Value to JSON Format Using jQuery and JavaScript

Issues with AngularJS compatibility on Internet Explorer 8

display a new feature immediately upon the user's login

Guide to sending a similar request as a curl command through a JavaScript file

What is the best way to add a character within a YouTube JSON link?

Using force-directed layout to access and retrieve specific data from external or internal data sources

Using Vue.Js to link a value to a checkbox within a component

Is it possible to incorporate a variable into an object?

Tips on ensuring data cleanliness in jQuery input fields

Displaying all API data by default in Vue.js, even with filters, sorting, and search enabled - how can it be done?

The absence of essential DOM types in a TypeScript project is causing issues

I have encountered an issue where after declaring a JavaScript variable on a specific page, including the JavaScript file does not grant access to it

Invoke the function for every element during the mapping process

Preventing unauthorized access to files in ExpressJS public directories

AngularJS allows for the passing of a function value into another function

Having Difficulty Converting JavaScript Objects/JSON into PHP Arrays