Souci de balise IMG avec width en % sous IE8

**fabrice91** · 03/09/2009, 11h31

Bonjour,

Ca fait quelques heures que je cherche ici et ailleurs mais pas encore trouvé de solution.
Je viens donc vous exposer le problème tout en continuant à chercher...
J'ai des images redimensionnées en % dans une table.
Tout marche parfaitement sous FF 3.5 mais ça ne fonctionne pas sous IE8.
Voici le code (volontairement dépouillé...) tout simple :

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
<html>
<head>
<style>
img.hauteur { 
width: 50%;
height:50%;
}
 
img.largeur {
width: 40%;
height:40%;
}
</style>
</head>
 
<body>
 
 
<table border="1">
<tr><td>Avril</td><td>Mai</td></tr>
<tr><td><img class="hauteur" src="images/HC/HC_black_mamba.jpg" /></td><td><img class="largeur" src="images/HC/HC_pied_home5.jpg" /></td></tr>
</table>
 
 
</body>
</html>

Et un lien pour tester la différence FF/IE :
http://fabrice91.free.fr/test.html

Merci de vos avis !!!

**franculo_caoulene** · 03/09/2009, 18h10

Salut,

Il faut dimensionner le conteneur, en l'occurrence td.

**fabrice91** · 03/09/2009, 19h19

Envoyé par franculo_caoulene

Salut,

Il faut dimensionner le conteneur, en l'occurrence td.

J'ai appliqué le style sur le td mais les images ne sont pas redimensionnées, elles apparaissent dans leur taille originale...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<style>
td.hauteur { 
width: 50%;
height:50%;
}
 
td.largeur {
width: 40%;
height:40%;
}
</style>

**Damouille** · 04/09/2009, 09h38

Si du redimensionne le containeur, il faudra mettre les images en 100% pour qu'elles fittent le conteneur. Par exemple:

Code :

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

1
2
3
4
5
6
7
td {
height: 200px;
}
td img {
height: 100%;
width: auto;
}

**fabrice91** · 04/09/2009, 10h12

Envoyé par Damouille

Si du redimensionne le containeur, il faudra mettre les images en 100% pour qu'elles fittent le conteneur. Par exemple:

Code :

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

1
2
3
4
5
6
7
td {
height: 200px;
}
td img {
height: 100%;
width: auto;
}

Merci pour ta réponse...
Le souci c'est que je ne veux pas définir la hauteur en pixel !
Pourquoi fixer le height du td a 200px ?

Ce que je voulais c'est juste fixer une taille en % par rapport à l'image d'origine.
C'est dingue les prises de têtes qu'il faut se faire pour IE...
Ca marche si "naturellement" avec FF (et pas seulement ce problème...) que cela en est désespérant...(no troll)
Bon je vais devoir m'adapter en utilisant ta solution...
Encore merci !

**franculo_caoulene** · 04/09/2009, 10h36

Au fait j'y pense il faut utiliser un doctype, pour que tous les navigateurs aient le même comportement!

**Macmillenium** · 04/09/2009, 10h43

C'est effectivement un problème de Doctype, les images s'affichent correctement en mode de rendu standard IE8 et IE7.

**fabrice91** · 04/09/2009, 11h02

Pfiou, très bonne remarque...
Merci pour le doctype, je l'avais complètement oublié !!!
Bon, ça va, je faisais de toutes façons attention à ma syntaxe...
En tout cas la définition du doctype a remis les pages carrées !!!
Du coup ma page IE est correcte mais maintenant c'est FF qui va pas...

J'ai mis un width de 800px dans la classe de la table, et si la table est à la bonne taille dans IE, elle s'étale bien plus longuement sous FF...
A voir...

**fabrice91** · 04/09/2009, 18h16

Bon et bien j'ai maintenant identifié la cause du problème sous FF :
le tableau contient 2 images : l'une de 640 px de large avant redimension et l'autre de 480px de large avant redimension.
Le tableau est fixé par css à 760 px en width.
Le height a 200px dans le td fixe bien la hauteur de la cellule mais le height: 100% width: auto dans l'image n'ont pas l'air de faire le boulot.
Les images sont bien redimensionnées, mais ! le tableau ne fait plus 760 px de large ! il sors allègrement des limites de la page...
Sous FireBug, je vois que la ligne tr fait 1160 px !
En fait, c'est la somme des deux tailles des images sans redimension, 640 + 480 + des broutilles cosmétiques (marges...).
DONC : FF me redimensionne bien les images mais conserve la place de l'image d'origine !!!
Une idée ???
merci...

**fabrice91** · 04/09/2009, 19h52

Bon et bien après une journée perdue sur ce problème, je vais créer des images vignettes de petites tailles à la bonne dimension, ces histoires de redimensionnement d'images sont tout simplement impossible à résoudre pour une compatibilité FF et IE.
Merci pour les patients...

Souci de balise IMG avec width en % sous IE8

CSS

Discussions similaires

Partager

Partager