27799 sujets

CSS et mise en forme, CSS3

Bonjour,

J'essaie de créer une lightbox en CSS uniquement.
Lorsque je clique sur une vignette, la lightbox s'ouvre et affiche l'image ainsi que les boutons de navigation.

Lorsque la fenêtre du navigateur est verticale, l'image se redimensionne correctement, elle est bien centrée et bien proportionnée.
upload/1646491394-84019-captureverticale.png

Mais lorsque la fenêtre du navigateur est très horizontale, l'image ne se redimensionne pas correctement, et elle est rognée en haut et en bas.
upload/1646491461-84019-capturehorizontale.png

Je joins le code HTML et CSS ci-dessous.

Merci par avance à celui ou celle qui aura la bonne idée pour résoudre mon problème Smiley smile

Raphaël



<!DOCTYPE html>
<html lang="fr">
	<head>
	  
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>lightbox</title>

		<link href="lightbox.css" rel="stylesheet">
		
	</head>

	<body>
  	
	</main>
		<div class="grille">
		
			<!-- image 1 -->
			<div class="case">
				<!-- vignette -->
				<a href="#img1">
					<img src="img1.jpg">
				</a>
				<!-- lightbox -->
				<div href="#" class="lightbox" id="img1">
					<div class="lightbox-content">
						<img src="img1.jpg">
						<p>légende image 1</p>
					</div>
						<a href="#" class="close">close</a>
						<a href="#img2" class="next">next</a>
				</div>
			</div>
			
			<!-- image 2 -->
			<div class="case">
				<!-- vignette -->
				<a href="#img2">
					<img src="img2.jpg">
				</a>
				<!-- lightbox -->
				<div href="#" class="lightbox" id="img2">
					<div class="lightbox-content">
						<img src="img2.jpg">
						<p>légende image 2</p>
					</div>
						<a href="#" class="close">close</a>
						<a href="#img1" class="prev">previous</a>
						<a href="#img3" class="next">next</a>
				</div>
			</div>
			
			<!-- image 3 -->
			<div class="case">
				<!-- vignette -->
				<a href="#img3">
					<img src="img3.jpg">
				</a>
				<!-- lightbox -->
				<div href="#" class="lightbox" id="img3">
					<div class="lightbox-content">
						<img src="img3.jpg">
						<p>légende image 3</p>
					</div>
						<a href="#" class="close">close</a>
						<a href="#img2" class="prev">previous</a>
				</div>
			</div>
			
		</div>
	</main>
   
	</body>
	
</html>



/** grille **/

.grille {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	margin: auto;
}

.case {
	flex: 30%;
	margin: 10px;
}

img {
	display: block;
	border: none;
	max-width: 100%;
}




/** LIGHTBOX **/

.lightbox {
	display: none;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
}

.lightbox:target {
	display: block;
}

.lightbox-content {
	margin-top: 50vh;
	transform: translateY(-50%);
	padding: 100px;
}

.lightbox-content img {
	margin: auto;
}

.lightbox p {
	color: #fff;
	text-align: center;
}

.lightbox a {
	color: #aaa;
	text-decoration: none;
	background-color: #444;
	padding: 5px;
	}

.lightbox-content a:hover,
.lightbox-content a:hover .st4 {
	color: #fff;
}

.close {
	position: absolute;
	top: 30px;
	right: 30px;
}

.prev {
	position: absolute;
	top: 50%;
	left: 30px;
}

.next {
	position: absolute;
	top: 50%;
	right: 30px;
}



@media (max-width: 600px) {
	
	.case {
		flex: 45%;
    }

}

Modifié par miaoumix75 (05 Mar 2022 - 16:01)
Merci pour ta réponse niuxe Smiley biggrin
Pour empêcher la déformation de l'image avec les petites résolutions, j'ai ajouté object-fit: contain à img et ça fonctionne nickel Smiley good
Il y a juste un problème avec le positionnement avec la légende, mais je vais chercher une solution.
Modifié par miaoumix75 (05 Mar 2022 - 18:47)
Modérateur
miaoumix75 a écrit :
Merci pour ta réponse niuxe Smiley biggrin
Pour empêcher la déformation de l'image avec les petites résolutions, j'ai ajouté object-fit: contain à img et ça fonctionne nickel Smiley good
Il y a juste un problème avec le positionnement avec la légende, mais je vais chercher une solution.


ah oui bien vu pour object-fit. Je n'avais pas du tout pensé à cette règle.