Alignement horizontal d'image et resize

**zebulon36** · 09/06/2015, 22h51

Bonjour,

Je cherche à réaliser une galerie de photo dans laquelle les photos sont juxtaposées (alignées sur une seule ligne). On parcourt les photos en faisant glisser un ascenseur horizontal.
Je veux que les photos aient toutes la même hauteur : Egale à 80% de la hauteur de la fenêtre.
Leurs largeurs s'adaptent pour garder le ratio hauteur/largeur initial (= pas de déformation)
Sous chaque photo il y a un petit commentaire, centré, dont la largeur ne dépasse pas la largeur de celle-ci.
Enfin, les fichier photos n'ont pas tous la même taille ou la même orientation (portait, paysage...)

Comment faire cela en CSS ?

Voici ce que j'ai déjà tenté, mais cela n'aboutit pas ... :

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
<body>
<div class="ligne">
	<span class="image">
		<img src="\image\image1.jpeg">
		<p class="commentaire">Voici image n°1</p>
	</span>
	<span class="image">
		<img src="\image\image2.jpeg">
		<p class="commentaire">Voici image n°2</p>
	</span>
	<span class="image">
		<img src="\image\image3.jpeg">
		<p class="commentaire">Voici image n°3</p>
	</span>
        ...
	<span class="image">
		<img src="\image\image9.jpeg">
		<p class="commentaire">Voici image n°9</p>
	</span>
	<span class="image">
		<img src="\image\image10.jpeg">
		<p class="commentaire">Voici image n°10</p>
	</span>
</div>
</body>

et le CSS :

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
17
body {
	width: 20000px;
}
 
.ligne {
	height: 80%;
	overflow: hidden;
}
 
.image {	
        float: left;
       display: inline;
       overflow: hidden;
}
 
.commentaire {
}

Merci !