Bonjour à tous,

Je souhaite afficher une image dans un div dont la largeur est définie en %. Dans le cas présent, 25%.
Le problème est que mon image, est, elle aussi définie en % grâce au code que j'ai pu récupérer ici : http://jonathannicol.com/blog/2014/0...ails-with-css/.

Le div parent n'a donc pas de hauteur définie et reste toujours à 0. Comment pourrais)je corriger cela ?
Voici mon code pour le moment :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
figure{
display:inline-block;
position: relative;
margin-right:0.6em;
margin-bottom:0.6em;
width: 25%;
height:auto;
overflow: hidden;
}
 
.picture {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: block; 
}
 
.picture img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
overflow: hidden;
display:block; 
}
 
.picture img.portrait{
width: 100%;
height: auto;
}
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<figure><a href="images/gallery/duplex-inf/01.jpg" class="picture zoombox zgallery2"><img src="images/gallery/duplex-inf/01.jpg" /></a></figure>
<figure><a href="images/gallery/duplex-inf/02.jpg" class="picture zoombox zgallery2"><img src="images/gallery/duplex-inf/02.jpg" /></a></figure>
<figure><a href="images/gallery/duplex-inf/09.jpg" class="picture zoombox zgallery2"><img src="images/gallery/duplex-inf/09.jpg" class="portrait"/></a></figure>

Si vous avez une autre solution n'hésitez pas, tout ce que je veux c'est que des lignes de 4 images, et qu'elles aient toutes la même hauteur/largeur, même pour les image portrait.
Merci d'avance