Discussion :

[bigs3232]

j'ai un couloir de ligne horizontale
j'aimerais ajouter sur ce couloir 3 photos de hauteur différents
et j'aimerais que la hauteur de chaque image s'ajuste automatiquement a la hauteur du couloir
comment faire celà
merci d'avance
voici le début du code

Code html :

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

1
2
3
4
5
<div>
<img class="pi_bimg" src="'.$src.'" alt="'.$conn_alt.'" title="'.$conn_alt.'">
<img class="pi_bimg" src="'.$src1.'" alt="'.$conn_alt.'" title="'.$conn_alt.'">
<img class="pi_bimg" src="'.$src2.'" alt="'.$conn_alt.'" title="'.$conn_alt.'">
</div>

[Michel]

Bonjour bigs3232
Essaye de fixer la hauteur de la div et ensuite la hauteur de l'image à cette valeur; normalement la largeur s'adapte. Attention à la qualité du résultat malgré tout.

[bigs3232]

c'est possible de fixer la hauteur de la div et pour une image quelconque ajuster automatiquement la heuteur de l'image a la heuteur de la div
en effet je ne connais pas précisement la hauteur des images .
chaque image peut avoir une hauteur de +-20% de la hauteur de la div

[Michel]

On peut travailler en %

Code :

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

1
2
3
4
img {
	max-height: 100%;
	width: auto;
}

voir http://tassedecafe.org/fr/responsive...ver-ratio-1175

[grophies]

Code html :

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

1
2
3
4
5
<div>
  <img src="http://blogpeda.ac-poitiers.fr/techno4e-jean-mace/files/2013/11/copy-Baniere-1000x288-4eme-041113-V9.jpg" />
  <img src="https://saffi3d.files.wordpress.com/2011/08/exterior_pano1.jpg" />
  <img src="http://www.webdesign-tutoriaux.com/images/070720003529-voiture.png" />
  </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
17
18
19
20
21
22
23
 
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
div
{
  display: flex;
}
 
img
{
  margin-left: 1%;
  width: calc(100% / 3);
}
 
img:last-of-type
{
  margin-right: 1%;
}