Discussion :

[Kira1981]

Bonjour,

Donc j'ai 4 images alignés sur ma page html mais 1 des 4 images à un format différent aux autres.
elle est plus haute que les 3 autres.
je voudrais que les 4 images soient à la même taille mais je voudrais le faire via le CSS.
Quelqu'un a t'il une solution?

[paoli121]

- Pour une même hauteur :

Code :

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

1
2
3
4
 
img{
    height : 200px;
}

- Ou pour une même largeur

Code :

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

1
2
3
4
 
img{
  width : 200px;
}

[Kira1981]

Bonjour,

en fait, le principal problème est que toutes ces images se trouvent dans un <div>.
en plus, ça me fait un bottom-padding de 5px et c'est franchement moche.

J'essaye de le supprimer mais j'ai pas encore trouvé.
je cherche.

[Sodium]

Fais quatre divs de même taille, mets l'image en image de fond via background-image en CSS avec la propriété background-size: cover;

[paoli121]

mais là les images n'ont pas la même taille, du coup il doit compléter background-size et no-repeat

[Kira1981]

Bonjour,

Donc je dois faire 4 div différentes avec un background différents si j'ai bien tout compris?

[Sodium]

Avec background-size: cover;, les images s'adapteront de façon à remplir toujours tout l'espace utilisé sans être déformées.

Après si tu veux juste que tes images fassent toute la même hauteur et pas forcément la même largeur, tu forces simplement la hauteur en pixels et tu mets la largeur en auto.

[Invité]

Bonjour,

1- merci de montrer les code HTML et CSS.

Une copie d'écran de ce que tu obtiens peut aider.

2- "la même taille" ne veut rien dire.

• Même hauteur ?
• Même largeur ?
• En conservant les proportions ? ou pas ?
• A des dimensions fixées ? ou adaptables (responsive) ?
• ...

[Kira1981]

A priori, j'ai réussi.
voila ce que j'ai fais :

Code :

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

1
2
3
4
5
6
7
8
9
.content {
  display: inline-block;
}
.content img {
    max-height: 150px;
    width:150 px;
    border: 1px solid #cccccc;
    margin : 20px 50px 0px 0px;
}

ça à l'air de fonctionner.
encore merci

[Sodium]

Ca veut dire que si ton image fait plus de 150px, elle va être déformée.

[Kira1981]

Il vaut mieux que je mette tout à 200px?

[psychadelic]

si tu veux mettre toutes tes image dans un seule et unique taille en largeur et en hauteur, il faut qu'elles aient toute le même ratio entre leur largeur et leur hauteur...

si ce ratio est différent alors toutes celles qui n'auront pas le même ratio, que celui choisi pour l'affichage, seront déformées.

[NoSmoking]

Bonjour,
est ce que tu as au moins essayé

Code :

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

1
2
3
4
img {
  max-height: 200px;
  width: auto;
}

il n'y a pas de raison que cela ne le fasse pas, avec ou sans conteneur.

en plus, ça me fait un bottom-padding de 5px et c'est franchement moche.

ceci est lié au modèle de boîte utilisé par défaut pour les images qui est inline.
Pourquoi je ne peux pas enlever l'espacement sous mon image ?