En ocasiones ponemos varias fotos en una publicación y de pronto "no lucen" lo suficiente porque son más pequeñas que nuestra pantalla, en algunos frameworks como por ejemplo AMP de Google ya lo trae por defecto, que le picas a la foto y se hace lo más grande posible a lo alto o ancho de tu pantalla, desplegando más detalles de la foto.
Para implementar manualmente esto se puede hacer con puro javascript y css, sin mayor problema. Entonces lo primero es que, digamos que las fotografías están todas con la clase .image
El javascript:
(function() { const imgs = document.querySelectorAll('img.image'); const fullPage = document.querySelector('div#lafoto'); imgs.forEach(img => { img.addEventListener('click', function() { fullPage.style.backgroundImage = 'url(' + img.src + ')'; fullPage.style.display = 'block'; }); }); })();
Ahí, obtenemos todas las imágenes con la clase image y luego le añadimos un evento que al dar click, establezca la foto de fondo de un contenedor llamado #lafoto
El css:
div#lafoto { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100vw; height: 100vh; background-size: contain; background-repeat: no-repeat no-repeat; background-position: center center; background-color: black; cursor:pointer; }
Por último, el html:
<div id="lafoto" onclick="this.style.display='none';"></div>
Eso es todo, a cada imagen al dar click la hará del tamaño de la pantalla, ya sea a lo ancho o alto, conservando la proporción.
Eso es todo, las imágenes serían puestas normalmente, sólo añadiendo la clase image.
https://panchito-kardashian.tar.mx/media/2022/07/enarge_photo.jpg