Discussion :

[groupe51]

Salut à tous,

voila mon problème, j'ai demandé hier sur ce forum comment faire pour utiliser les pourcentages en même temps pour le positionnement des objets et pour leur dimensions dans ma page html.

voici la réponse que l'on m'a donnée (Merci masu )

Code :

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

1
2
3
<div style="position:absolute; left:10%; top:5%;">
<img src="screen.jpg" style="display:block; width:50%; height:50%;" />
</div>

Ce code est niquel mais un problème persiste: l'image que je place et redimensionne ne peut pas avoir une taille supérieure à sa taille initiale.

Je m'explique : si mon image fait 200*200, même si je lui demande de prendre 50% de mon écran (width:50%; height:50%; ), elle restera à 200*200 et donc ne prendra pas 50% de mon écran.

J'espère que j'ai été assez clair, enfin voila, si quelqu'un avait une proposition pour résoudre ce petit problème, ca m'aiderai beaucoup.

[blueice]

Donne lui 100% comme dimension...
EDIT

Code :

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

1
2
3
 
<div style="position:absolute; left:25%; right:25%; top:5%; width: 50%;">
<img src="toto.jpg" style="display:block; width:100%; height:100%;" /></div>

[groupe51]

Non ca ne fonctionne pas, c'est un pourcentage de l'écran (donc si je lui demande de faire 100% , l'image devrait prendre tout l'écran) or là, l'image ne peut pas être plus grande que sa taille initiale. Donc si elle fait 200*200, je peux au max la mettre à 200*200 (par exemple 10%) et même si je met plus que ca (par exemple 20% ou 50%), j'aurais le même résultat càd mon image taille maximum.

Moi je veux qu'elle s'agrandisse si besoin est.

merci

[blueice]

Non ca ne fonctionne pas, c'est un pourcentage de l'écran (donc si je lui demande de faire 100% , l'image devrait prendre tout l'écran) or là, l'image ne peut pas être plus grande que sa taille initiale.

NON ! l'image ne prendra pas tout l'écran, puisque ta div fait 50%, elle fera 100% des 50% de la div ! DOnc si tu agrandis ta fenêtre l'image grandira d'autant.

[groupe51]

Et bien j'ai testé et je voulais savoir:

Le right et le height sont ils nécessaires??

Code :

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

1
2
<div style="position:absolute; left:25%; right:25%; top:5%; width: 50%;">
<img src="toto.jpg" style="display:block; width:100%; height:100%;" /></div>

Parce que quand je les enlèvent ou que je modifie leurs valeur, j'obtiens le même résultat.

et en fait mon image reste toujours proportionnelle à sa taille d'origine, certes elle peut prendre tout l'écran mais si je veux uniquement qu'elle prenne 10% en horizontale et 100% en vertical, ca ne fonctionne plus.

Faut-il raouter quelque chose??

[blueice]

Code :

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

1
2
<div style="position:absolute; left:25%;top:5%;  right:25%; width: 50%;">
<img src="toto.jpg" style="display:block; width:10%; height:100%;" /></div>

Ben si ca fonctionne...

[groupe51]

Alors tu obtiens une image étirée?? Pas chez moi en tout cas.

Moi j'obtiens une petite image mais toujours proportionnelle à sa taille d'origine donc pas du tout étirée.

Quel est le problème??

[blueice]

Sous internet explorer ?

Voici un exemple :
http://www.dimension-internet.com/dev/pic.html

et la capture :
http://www.dimension-internet.com/dev/pic.png

[groupe51]

J'obtiens le même résultat que dans ton exemple mais je n'arrive pas à obtenir le même que dans ta capture.
Qu'est ce qui change dans le code??

merci

[blueice]

Rien ne change, uniquement ton navigateur.
Je viens de vérifier, même Firefox ne fonctionne pas.

Moi je suis sous Safari...

Je vais creuser le pourquoi du comment

[groupe51]

Ah ok, c'est donc pour ca...

C'est pénible ces différences entre navigateurs.

[groupe51]

Je cherche une solution plutot pour Internet Explorer si cela est possible.
Est-ce que c'est le div qui empêche de resizer l'image??