quand cliquez sur l'image, il est devenu plus grand et le centre de l'écran

Question

---

Bonjour, Je travaille sur un projet où télécharger des images des utilisateurs et je veux que lorsque l'utilisateur clique sur l'image, il est devenu plus grand en mode plein écran et au centre de l'écran comment puis-je y parvenir?

Voici mon code:

<img src="@Model.Pic1" class="img-responsive" width="750" height="750"/> <img src="@Model.Pic2" class="img-responsive" width="750" height="750"/> <img src="@Model.Pic3" class="img-responsive" width="750" height="750"/> <img src="@Model.Pic4" class="img-responsive" width="750" height="750"/> <img src="@Model.Pic5" class="img-responsive" width="750" height="750"/> 

Answer 1

Vous pouvez utiliser position: fixed; pour faire une position des éléments par rapport au point de vue. Puis, utilisez top: 50%; left: 50%; transform: translate(-50%, -50%); pour le centrer. (Cela positionnera le coin supérieur gauche au milieu de l'écran, mais le déplacera ensuite de -50%, -50% par rapport à la taille de l'image pour qu'il soit centré.)

Pour changer d'état, créez simplement un CSS- sélecteur pour la position normale et un centré et basculer la deuxième classe via JS. (En utilisant element.classList.toggle("centeredStyle");)

Notez que puisque vous modifiez le positionnement de l'image de statique fixe sans doute qui réorganiser vos autres éléments (parce que les éléments avec position: fixed; ne prennent pas de place). Pour arrêter cela, vous pouvez simplement envelopper toutes les images et toujours redimensionner le wrapper au lieu de l'image elle-même.