Alignement horizontal d'image et resize
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:
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:
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 !
