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?
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";
}
Puedes cambiar la escala de la imagen cuando se haga click:
img = document.getElementById('myImg')
img.style.transform = 'scale(1.9)'
Jquery
, haces un eventoclick
y que cambie a una clase que ya tengas predefinida con las caracteristicascss