Dada una imagen y la tarea es aumentar y disminuir el tamaño de la imagen usando JavaScript. Utilice la siguiente propiedad para aumentar y disminuir la imagen.
Uso de la propiedad Ancho: se utiliza para cambiar los nuevos valores para cambiar el tamaño del ancho del elemento.
Sintaxis:
object.style.width = "auto|length|%|initial|inherit"
Acercarse:
- Obtenga el selector de la imagen requerida usando .getElementById(selector) .
- Almacene el valor de ancho actual en la variable usando .clientWidth .
- Ahora cambie el valor de ancho a nuevo usando .style.width .
- Aumentará y disminuirá proporcionalmente la dimensión de una imagen.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to zoom-in and zoom-out
image using JavaScript ?
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h3>
JavaScript | Increase and
Decrease image size
</h3>
<hr>
<div class="box">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190912174307/qwe1.png"
id="geeks" GFG="250" alt="Geeksforgeeks">
</div>
<hr>
<button type="button" onclick="zoomin()">
Zoom-In
</button>
<button type="button" onclick="zoomout()">
Zoom-Out
</button>
<script type="text/javascript">
function zoomin() {
var GFG = document.getElementById("geeks");
var currWidth = GFG.clientWidth;
GFG.style.width = (currWidth + 100) + "px";
}
function zoomout() {
var GFG = document.getElementById("geeks");
var currWidth = GFG.clientWidth;
GFG.style.width = (currWidth - 100) + "px";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón Acercar:
- Después de hacer clic en el botón Zoom-Out:
Uso de la propiedad Altura: se utiliza para cambiar los nuevos valores para cambiar el tamaño de la altura del elemento.
Sintaxis:
object.style.height = "auto|length|%|initial|inherit"
Acercarse:
- Obtenga el selector de la imagen requerida usando .getElementById(selector) .
- Almacene el valor de altura actual en la variable usando .clientHeight .
- Ahora cambie el valor de ancho a nuevo usando .style.height .
- Aumentará y disminuirá proporcionalmente la dimensión de una imagen.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to zoom-in and zoom-out
image using JavaScript ?
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h3>
JavaScript | Increase and
Decrease image size
</h3>
<hr>
<div class="box">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190912174307/qwe1.png"
id="geeks" GFG="250" alt="Geeksforgeeks">
</div>
<hr>
<button type="button" onclick="zoomin()">
Zoom-In
</button>
<button type="button" onclick="zoomout()">
Zoom-Out
</button>
<script type="text/javascript">
function zoomin() {
var GFG = document.getElementById("geeks");
var currHeight = GFG.clientHeight;
GFG.style.height = (currHeight + 40) + "px";
}
function zoomout() {
var GFG = document.getElementById("geeks");
var currHeight = GFG.clientHeight;
GFG.style.height = (currHeight - 40) + "px";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón Acercar:
- Después de hacer clic en el botón Zoom-Out:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA