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

Version imprimable

30/03/2010, 11h28
Marc22

<img> Allouer un espace de 120 px mais sans perdre les proportions de l'image
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:

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
30/03/2010, 12h23
polymorphisme

Bonjour,

mais finalement, c'est quoi ton soucis ?
30/03/2010, 15h10
coeos.pro

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
30/03/2010, 17h50
Marc22

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?

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

Code:

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>

31/03/2010, 09h21
Marc22

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:

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?