Discussion :

[Vinzzzzzz]

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

[Invité]

Bonjour,

une astuce consiste à utiliser une image transparente, aux proportions d'affichage (par exemple : carré).
Ici : fade.gif

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<figure>
  <img alt="" src="images/fade.gif" />
  <a href="images/gallery/duplex-inf/01.jpg" class="picture zoombox zgallery2"><img src="images/01.jpg" /></a>
</figure>
<figure>
  <img alt="" src="images/fade.gif" />
  <a href="images/gallery/duplex-inf/02.jpg" class="picture zoombox zgallery2"><img src="images/02.jpg" /></a>
</figure>
<figure>
  <img alt="" src="images/fade.gif" />
  <a href="images/gallery/duplex-inf/09.jpg" class="picture zoombox zgallery2"><img src="images/03.jpg" class="portrait"/></a>
</figure>

Code css :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
* {
  margin: 0;
  padding: 0;
  border: 0;
}
 
figure {
  position: relative;
  display: block;
  float:left;
  width: 24%;
  margin-right: 1%;
  margin-bottom: 0.6em;
}
 
/* image transparente CARRE -> hauteur = largeur (sinon, adapter la proportion) */
figure > img {
  width: 100%;
}
 
.picture {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
 
.picture img {
  position: absolute;
  display: block;
  height: 100%;
  width: auto;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
 
.picture img.portrait {
  width: 100%;
  height: auto;
}