Hay dos métodos de uso común que se pueden usar para cambiar el tamaño de una imagen cuando se hace clic con javascript. Las funciones de javascript se pueden invocar especificando onclick=”function_name()”
Método 1: transformar: escala()
Sintaxis:
object.style.transform = scale(sx); object.style.transform = scale(sx, sy);
La propiedad de transformación se utiliza para modificar la forma, el tamaño o la posición de un elemento. Al especificar el valor de la escala , el tamaño del elemento se puede modificar según la proporción dada.
Si no se proporciona s y , su valor predeterminado es s x , lo que da como resultado una escala uniforme y, por lo tanto, preserva la relación de aspecto del elemento.
Acercarse:
- Obtenga el selector de la imagen requerida usando .getElementById(selector).
- Establezca la proporción por la cual la imagen necesita ser ampliada usando .style.transform = “scale( value )” .
- El efecto de animación se puede agregar usando .style.transition para dar una apariencia atractiva.
- Cuando se llama a la función usando el método .onclick() en la pestaña de la imagen, el tamaño de la imagen aumentará proporcionalmente según la escala dada.
Ejemplo:
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>
Producción:
Cambiar el tamaño de la imagen usando transform: scale()
Método 2: altura y ancho de CSS
Sintaxis:
object.style.width = value(%, px, em, auto, etc); object.style.height= value(%, px, em, auto, etc);
La propiedad de alto y ancho de CSS especifica el alto y el ancho del elemento. Usando esto, podemos definir explícitamente las dimensiones que queremos en la imagen ampliada (o reducida).
Acercarse:
- Obtenga el selector de la imagen requerida usando .getElementById(selector) .
- Establezca el valor de ancho/alto que debe tener la imagen ampliada usando .style.width .
- Se sugiere mantener el otro valor de dimensión automático para mantener la relación de aspecto de la imagen.
- El efecto de animación se puede agregar usando .style.transition para dar una apariencia atractiva.
- Cuando se llama a la función usando el método .onclick() en la pestaña de la imagen, el tamaño de la imagen cambiará según las dimensiones dadas.
Ejemplo:
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>
Producción:
Cambiar el tamaño de la imagen usando style.width
Pasar el elemento de imagen directamente a la función usando la palabra clave ‘ this’ :
Además de obtener el elemento requerido usando su id, también se puede pasar la referencia del elemento de imagen ( usando esta palabra clave ) a la función como parámetro y realizar las operaciones requeridas en él. Sin embargo, para la parte del botón de reinicio, obtener el selector de elemento por id es la mejor opción, ya que pasar su referencia a la función de reinicio cambiará el tamaño del botón de reinicio.
Acercarse:
- Esto es similar al primer método excepto que pasamos directamente la referencia a la imagen como parámetro a la función.
Ejemplo:
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>
Producción:
Cambiar el tamaño de la imagen usando transform: scale()
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
CSS se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender CSS y Javascript de los enlaces a continuación:
- Tutorial de CSS y ejemplos de CSS
- Tutorial de JavaScript y ejemplos de JavaScript
Publicación traducida automáticamente
Artículo escrito por the_alphaEye y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA