1485 sujets

Web Mobile et responsive web design

[Résolu] DIV avec image centrée dans les deux sens

Salut à tous,

Mon premier message ici.

Je suis en train de refaire une galerie photo, toute la partie PHP se passe bien, je ne suis qu'un amateur mais ça fait des années que j'en fait et je m'en sors.

Par contre je suis encore de l'époque de Frontpage et des table... Et moi le premier je surf plus sur mon smartphone que mon PC, donc je ne peux refaire cela.

J'ai besoin qu'après un clic, une DIV s'affiche avec un fond transparent à 90%, ça j'y arrive. Mais dans cette DIV, je souhaite que s'affiche une image, là jusqu'ici ça va aussi mais... Je n'arrive pas à faire que cette image soit ajuster en largeur ET en hauteur en gardant ses proportions. Je demande de l'aide.

Merci d'avance
Salut, merci pour ta proposition, je suis en train de travailler sur tout ce qui se passe avant d'arriver à cette fonction, je reviens vers toi pour te dire ce que j'arrive à faire.

EDIT : si ça intéresse du monde, voici : https://photos.corsa-b.fr/
PS : je pense que c'est loin d'être au top pour certains, mais pour l'instant ça fonctionne
Modifié par LeKiffeur (25 Apr 2020 - 15:54)
Bon me reste que si je redimensionne la page en hauteur, l'image ne s'ajuste plus... Donc pas solutionner mais j'ai avancé, enfin je pense.
Bon bah je cherche, je cherche, mais si je retire le height; 100% de ma div, je n'arrive pas à redimensionner. Donc retour au point de départ.

J'ai simplifié au maximum, voici :
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Mon test de galerie plein écran</title>
	<style>
		body
		{
			height: 100%;
		}
		#container
		{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		#popup
		{
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.9);
			opacity:0;
			transition: opacity 400ms linear;
			pointer-events: none;
		}
		#popup:target
		{
			opacity:1;
			pointer-events: auto;
		}
		#popup > div
		{
			height: 100%;
			text-align: center;
			background: pink;
		}
		img {
			max-width: 100%;
			max-height: 100%;
		}
	</style>
</head>
<body>
	<h1>Mon test de galerie plein écran</h1>
	<a href="#popup">Clic pour ouvrir</a>
	<div id="container">
		Blablabla
	</div>
	<a href="#close">
		<div id="popup">
			<div>
				<img src="test.jpg" />
			</div>
		</div>
	</a>
</body>
</html>
Modérateur
Bonjour,

Si tu veux utilisé flex, alors sert t'en aussi sur le div de ton #popup:
Maj de ton code possible:
		#container,
		#popup > div /* ajout ici du modèle flex pour le conteneur de l'image*/
		{
			display: flex;
			align-items: center;
			justify-content: center;
		}
Meilleure solution
Parfait merci, j'en étais à chercher des galeries toutes façons et à essayer de décortiquer ce qu'il me fallait. Le premier coup j'avais retirer le height: 100%.

Voici le code complet corrigé :
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Mon test de galerie plein écran</title>
	<style>
		body
		{
			height: 100%;
		}
		#container,
		#popup > div
		{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		#popup
		{
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.9);
			opacity: 0;
			transition: opacity 400ms linear;
			pointer-events: none;
		}
		#popup:target
		{
			opacity: 1;
			pointer-events: auto;
		}
		#popup > div
		{
			height: 100%;
			background: pink;
		}
		img {
			max-width: 100%;
			max-height: 100%;
		}
	</style>
</head>
<body>
	<h1>Mon test de galerie plein écran</h1>
	<a href="#popup">Clic pour ouvrir</a>
	<div id="container">
		Blablabla
	</div>
	<a href="#close">
		<div id="popup">
			<div>
				<img src="test.jpg" />
			</div>
		</div>
	</a>
</body>
</html>

Modifié par LeKiffeur (26 Apr 2020 - 21:24)
Sujet clos
Aller à