2

Teniendo una imagen "en miniatura" en un HTML de la siguiente manera:

<img src="recursos/calle.jpg" width="80px" height="90px"/>

¿Cómo puedo hacer para que al hacer click en ella se agrande en forma de vista completa en pantalla?

2
  • Podrias hacerlo mediante Jquery, haces un evento click y que cambie a una clase que ya tengas predefinida con las caracteristicas css Commented el 10 feb. 2018 a las 13:12
  • Añade un onclick() <img src="recursos/calle.jpg" width="80px" height="90px" onclick="return ampliar()"/> Y dale una funcion javascript, y hay haces los cambios css
    – user71085
    Commented el 10 feb. 2018 a las 13:26

2 respuestas 2

9

Creo que lo que buscas es hacer una especie de ventana modal. Con Javascript puedes hacerlo, solo necesitas adaptar el siguiente codigo

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
    modal.style.display = "none";
}

Fuente: How TO - Modal Images (w3schools)

4

Puedes cambiar la escala de la imagen cuando se haga click:

img = document.getElementById('myImg')
img.style.transform = 'scale(1.9)'

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.