[Galerie photo] Image qui se resize automatiquement

D4rK_C0uaK6 · 21/02/2013, 13h33

Bonjour,

Je dois faire une galerie photo avec du css3/html5. Je dois avoir une image taille réelle qui se redimensionne si je diminue la largeur ou la hauteur.

La photo doit être centrée verticalement et horizontalement.

Je dois avoir aussi une flèche a droite et a gauche pour pouvoir passer aux photos suivantes/précédentes.

Je n'arrive pas a avoir une image centrée et en meme temps qui se redimensionne a la fois en hauteur et en largeur si je réduis ma fenêtre....

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div style="max-width:100%;">
    <img id="lightboxImage" src="http://photos1.cityvox.com/photos_400/169/83/545705.jpg" alt="" />
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#lightboxImage {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
.table {
    max-width:100%;
    display:table;
    height:100%;
    width:100%;
    text-align:center;
}
.cell {
    display:table-cell;
    vertical-align:middle;
}

NoSmoking · 23/02/2013, 09h47

Bonjour,
pour redimensionner en même temps que le resize de la fenêtre il te faut dimensionner en %.

Pour le reste

http://css.developpez.com/faq/?page=positionnement

Candygirl · 25/02/2013, 14h37

Bonjour,

Citation:

Envoyé par D4rK_C0uaK6

Je dois avoir une image taille réelle qui se redimensionne si je diminue la largeur ou la hauteur.

Ta problématique n'est pas clairement détaillée. Tu souhaites conserver les proportions, j'imagine ? Avoir l'image toujours affichée en entier ?

Le problème du display:table c'est qu'il induit un comportement de tableau et que, par conséquent, il va adapter ses dimensions à son contenu ce qui pose problème pour le resize en %. On peut limiter l'effet pour le width en utilisant la propriété/valeur table-layout:fixed.
Exemple qui ne fonctionne qu'avec un redimensionnement horizontal:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="utf-8">
	<title>centrage vertical</title>
	<style>
	html,body {
		height:100%;
		display:table;
		width:100%;
		table-layout: fixed;	
	}
 
	body {
		display:table-cell;
		vertical-align:middle;
	}
 
	img {
		display:block;
		max-height:100%;
		max-width:100%;
		margin:0 auto;		
	}
	</style>
 
 
</head>
 
<body>
	<img src="image.jpg" alt="image" style="width:600px;">
</body>
</html>

Le deuxième problème est que l'image doit garder ses proportions même lorsque le 100% de la fenêtre est plus petit que la taille réelle de l'image alors que l'autre dimension est, elle assez grande. Et là, je ne vois pas trop comment faire, sans recourir à du javascript, en dehors de l'utilisation de la propriété/valeur css3 background-size:contain (vu que tu précises pouvoir utiliser css3/html5, cela ne devrait pas poser de problème). Cette propriété gère précisément qui, de la largeur ou la hauteur, doit servir de référence pour le redimensionnement.

Un exemple minimaliste de ce qui est faisable (fonctionne à partir d'IE9):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="utf-8" />
	<title>centrage vertical</title>
	<style>
	html,body {
		height:100%;
		display:table;
		width:100%;
	}
 
	body {
		display:table-cell;
		vertical-align:middle;
	}
 
	div {
		width:100%;
		height:100%;
		margin:0 auto;
		background:no-repeat center;
		background-size:contain;
	}
 
	</style>
 
 
</head>
 
<body>
	<div style="background-image:url(image.jpg);max-width:600px;max-height:450px;"></div>
</body>
</html>

Note: le max-width et max-height sur le div sont les dimensions d'origine de ton image afin d'éviter l'agrandissement de l'image.

23/02/2013, 09h47	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 5 102 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 5 102 Points : 8 816 Points : 8 816	Bonjour, pour redimensionner en même temps que le resize de la fenêtre il te faut dimensionner en %. Pour le reste http://css.developpez.com/faq/?page=positionnement
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email