En este tutorial aprenderemos a Ajustar Dinámicamente el Tamaño de una Imagen en JavaScript. Este código cambiará el tamaño de la imagen cuando el usuario haga clic en un botón. El código usa onclick () para iniciar una función que cambiará dinámicamente el tamaño de la imagen al vincular la identificación de la imagen y establecer su estilo de elemento con el tamaño deseado. Siéntase libre de modificarlo y aplicarlo en su sistema, este es un tipo de programa fácil de usar
Usaremos JavaScript como un lenguaje de script del lado del servidor porque brinda un mayor control de su página web y extiende su capacidad de una manera moderna. Está escrito en HTML o como fuente externa para agregar algunas características necesarias en su sitio web.
Empezando:
Primero debe descargar el marco de arranque, este es el enlace para el arranque que utilicé para el diseño del diseño https://getbootstrap.com/.
La interfaz principal:
Este código contiene la interfaz de la aplicación. Para crear esto, simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="containet-fluid">
<a class="navbar-brand" href="https://www.compubinario.com">CompuBinario</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">Ajustar Dinámicamente el Tamaño de una Imagen en JavaScript</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-4">
<center><button class="btn btn-primary" onclick="resizeImage('large')">Grande</button></center>
<br />
<center><button class="btn btn-success" onclick="resizeImage('medium')">Medio</button></center>
<br />
<center><button class="btn btn-danger" onclick="resizeImage('small')">Pequeño</button></center>
</div>
<div class="col-md-8">
<center><img src="image.jpeg" id="image" style="width:300px; height:200px;"/></center>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Crear el Script:
Este código contiene el script de la aplicación. Este código cambiará dinámicamente el tamaño de la imagen cuando se hace clic en el botón. Para hacer esto, simplemente copie y escriba este bloque de códigos dentro del editor de texto, luego guárdelo como script.js dentro de la carpeta js.
function resizeImage(str){
if(str=="small"){
document.getElementById('image').style.height="140px";
document.getElementById('image').style.width="200px";
}else if(str=="medium"){
document.getElementById('image').style.height="200px";
document.getElementById('image').style.width="300px";
}else if(str=="large"){
document.getElementById('image').style.height="350px";
document.getElementById('image').style.width="100%";
}
}
Ahí lo tienes, hemos aprendido cómo Ajustar Dinámicamente el Tamaño de una Imagen en JavaScript. Espero que este sencillo tutorial te ayude a lo que estás buscando.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
