image width 100% oui mais de quoi ?

**SpaceFrog** · 31/03/2010, 11h35

J'ai une image dans un td

je lui mets un width:100%

Sous FFX j'ai le resultat escompté, l'image prend 100% de la largeur disponible de la cellule

Sous IE le pourcentage s'applique à la largeur de l'image elle même celle definie dans le header de l'image
Si je mets width 50% limage s'affiche à la moitié de sa largeur...
Comment afficher une image à 100% de la largeur disponible de son conteneur sous IE ???

**simotaqi** · 31/03/2010, 12h11

bonjour spacefrog
j'ai testé un cas posant le meme probleme ; je vois que c'est le meme probleme que tu as rencontré bon; j'ai essayé : width: 50% parent. j'ai vu que le probleme reglé dans mon nav ie9

non ; désolé; le ce que je vois c'est que si je mets autre chose (width:50% xxxx) je vois que le width change, j'ai egalement essayé width:auto; pourtant en vain

**Macmillenium** · 31/03/2010, 14h01

Montre ton code STP.

**SpaceFrog** · 31/03/2010, 14h46

Tout ce qu'il y a de plus basique ...
Le style étant dans les balises à des fins de tests ...

Code :

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

1
2
3
4
5
6
7
<table style="width:100%;border:0" >
	<tr style="width:100%">
		<td style="width:5%"></td >
		<td style="width:90%"><img src="SISTAC_H.png"  style="width:100%"/> </td >
		<td style="width:5%"></td >
	</tr>
</table>

Pour fxx le pourcentage est par rapport à la lagreur du conteneur td ...
pour IE il l'applique sur la taille de l'image

**Erwan31** · 31/03/2010, 18h22

Hello,
c'est pas normal IE devrait se comporter de la même manière, d'autre part tu ne précises pas sur quelle version d'IE tu as ce problème et dans quelle condition (IE8 en mode de rendu IE7?...)
Pour mieux diagnostiquer ton problème tu devrais fournir la totalité des codes.

**SpaceFrog** · 01/04/2010, 09h16

Tout est là !!!
Et ce comportement est toutes version de IE confondues !!!

Il semblerait que poru IE le % sur les dimensions de l'image soient par rapport aux dimensions de l'image elle même et pas en % du conteneur ...

**Erwan31** · 01/04/2010, 10h01

Etrange c'est tout le code HTML que tu as? Tu n'as pas de CSS? Sur quel OS?

Ah j'ai compris c'est ton IE qui te fait un sale poisson d'avril avant l'heure

**SpaceFrog** · 01/04/2010, 10h23

Le style étant dans les balises à des fins de tests ...

as tu au moins testé le code ???
tu verras que le pourcentage ne correspond en rien au conteneur

par exemple prenons le cas suivant:

conteneur de largeur 100px
image de largeur 1000px

pour ffx si je mets un width de 90% à l'image elle fera 90px (100 * 90%)

pour IE l'image fera 900px (1000 * 90%)

**SpaceFrog** · 01/04/2010, 11h44

Bon après quelque recherches sur le sujet il apparait que curieusement très peu se sont penchés sur le sujet, mais la solution se trouve dans le position absolute d'un élément parent de l'image ...

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<style type="text/css">
html, body {
	height:100%;
	width:100%;
   	}
 
body {
	margin:0;
	padding:0;
	}
 
table,tr { 
	width: 100%;
 
	}
 
.bordure	{
	width:5%;
	}
.milieu {
	width:90%;
	}
 
#conteneur {
	width:90%;
	position:absolute;
	overflow:hidden;}
 
#image {
	width:100%;
      height:auto;
      } 				
</style>
</head>
<body>
<table >
	<tr >
	      <td class="bordure"></td>
		<td class="milieu" ><div id="conteneur" ><img id="image" src="SISTAC_H.png"  / ></div></td >
		 <td class="bordure"></td>
	</tr>
</table>
</div>
</div>
 
</body>
 
</html>

Dans cet exemple le conteneur de l'image est placé en positon absolute et on lui attirbue la meêm largeur (le même pourcentage) que le td milieu ...

image width 100% oui mais de quoi ?

CSS

Discussions similaires

Partager

Partager