<img> Allouer un espace de 120 px mais sans perdre les proportions de l'image

**Marc22** · 30/03/2010, 12h28

Bonjour,

j'ai une mosaïque d'images, et je voudrais que les images s'affichent selon leurs proportions. J'ai ma fonction php qui s'occupe de réduire les images en gardant les proportions, ce n'est pas le soucis.

Le soucis c'est que comme les images, certaines sont moins larges, moins hautes que d'autres, ça me décale les légendes etc... Alors que quand tout était déformé mais en 120px sur 120px, bien entendu c'était régulier (mais disproportionné).

Donc je voudrais allouer quelque soit l'image, une taille de 120 sur 120px.

Et en mettant la balise img,

Code :

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

1
2
3
4
5
<img src="..." width="120" height="120" />
 
ou
 
<img src="..." style="width:120px; height:120px;" />

Et bien ça fait perdre la proportionnalité.

ps : je ne sais pas si le sujet est pas plus adapté au forum CSS

**polymorphisme** · 30/03/2010, 13h23

Bonjour,

mais finalement, c'est quoi ton soucis ?

**coeos.pro** · 30/03/2010, 16h10

Bonjour, en fait il veut créer une boite de 120px de coté (donc carré) et afficher dans cette boite une image rectangulaire sans perdre les proportions si l'image n'est pas carrée... facile, suffit d'utiliser max-height et max-width... sauf que IE ne le gère pas bien (pas du tout), je crois que la réponse se fait en JS

**Marc22** · 30/03/2010, 18h50

Oui c'est ça.

Merci coeos.pro, mais c'est bizarre, ça fonctionne pour le width, et pas pour le height

En fait quand je règle le width, ça dérègle le height et vice versa avec min-height et min-width

Faut il utiliser aussi max width et max height?

**coeos.pro** · 30/03/2010, 22h35

En fait ce code fonctionne très bien (mais pas sous IE)

Code html :

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
 
<html>
<head>
<style type="text/css">
 
 
 
img#boite_carre
{max-width:100px;
max-height:100px;}
 
</style>
</head>
<body>
 
 
<img id="boite_carre" src="http://www.lamoulinette.fr/images/moulinette.jpg"/>
 
 
</body>
</html>

**Marc22** · 31/03/2010, 10h21

Bonjour !

En fait mon soucis c'était que je passais pas les span, et donc j'ai rajouté display block sauf dans mon conteneur image_mosaique ou j'ai mis

Code :

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

display:-moz-stack;

Mais sur IE soit je gère l'exception soit je cherche un équivalent de -moz-stack, savez vous si ça existe?

<img> Allouer un espace de 120 px mais sans perdre les proportions de l'image

HTML

Discussions similaires

Partager

Partager