Adapter image proportionnellement fenêtre web

Fermé
romain - 1 mars 2011 à 14:09
 romain - 1 mars 2011 à 16:46
Bonjour,


Je débute en création de site et je n'ai pas encore trouvé de solution à mon pblm...Que ce soit sur le Net (pblm non résolu la plupart du temps) ou dans les bouquins :(

Alors, voilà: j'ai fait une page d'accueil avec Flash publiée en HTML (100% et sans bordure) qui s'adapte automatiquement et PROPORTIONNELLEMENT à plusieurs résolutions d'écran => ce qui est géniale!

Il s'agit d'une image qui remplit toute la surface de la fenêtre web (sans scrolling, of course!) et ce, quelque soit la taille de la fenêtre (redimensionnement).

Alors, voilà...Mon pblm c'est que je voudrais faire pareil en XHTML!

MAis de toute évidence je n'y suis pas encore parvenu...: j'ai essayé de mettre 100% (width height) en CSS à <img> => résultat proche SAUF que l'image se trouve DEFORMEE selon le redimensionnement de la fenêtre (si on étire en largeur ou en hauteur)!!!


Alors, je continue mes recherches...

Le truc, c'est que je ne sais même pas si ce que je veux faire est possible ?


Un avis éclairé serait le bienvenu ;-)

Merci


A voir également:

5 réponses

Utilisateur anonyme
1 mars 2011 à 14:56
Bonjour,

l'image sera inévitablement déformée si vous ne respectez pas le ratio de l'image. Vous devez fixer juste le width ou le height à 100%

évidement l'image n'occupera tout l'écran que si le ratio de l'écran correspond au ratio de l'image.

cordialement
0
Re,

Merci pour cette remarque! Effectivement, c'est déjà bien mieux ...(on va souvent chercher bien loin, les choses les plus simples ;)

j'ai gardé le height à 100%, ce qui permet un agrandissement proportionnel de l'image lorsque je "redimensionne" la fenêtre web

Toutefois, bien qu'ayant ajusté le ratio de l'image sur celui de mon écran le plus élevé, je n'arrive toujours pas à avoir le même effet que le document html publié par Flash..

=> C'est à dire que lorsque j'étire ma fenêtre, par exple, en longueur (sans toucher la hauteur), je vois maintenant le reste du background...(ici blanc) => mon image est en entier mais format timbre poste!

Alors que dans le doc fait avec Flash, l'image remplit toujours la totalité de la fenêtre:
seuls quelques éléments (ici le haut et le bas de la photo) ne sont plus affichés (=sont rognés de l'affichage)...MAis elle s'agrandit en largeur (le reste devient trop haut, c logique)

Donc, je ne comprends pas comment ils arrivent (Adobe Flash ;-) à avoir cet effet à la fois sur le width ET le height sans déformation...

J'ai essayé en mettant l'img en background du body mais biensûr, elle ne bouge pas (aucune redimension) : le bas et la droite sont rognés si je rétrécie la fenêtre, ce qui ne donne rien en petit écran...

Est-il possible que l'image remplisse toujours la totalité de la fenêtre...(quelque soit le format et résolution de la fenêtre et l' écran 16:9, 4:3...) sans pour autant quelle reste en totalité (=éviter l'apparition du bckground) => quitte à rogner les bords de l'image au besoin, du moment qu'il n'y a pas de scroll?

J'ai l'impression que je ne suis pas loin mais quel brouillard!


Si vous y voyez plus clair que moi ;-)
0
Utilisateur anonyme
1 mars 2011 à 16:33
Le HTML est un langage statique.
C'est à dire figé une fois pour toute.
Le redimensionnement des images est fait lors de l'affichage.
Si vous changez la taille de votre fenêtre, le navigateur ne change plus rien.
Si vous voulez un comportement dynamique, c'est à dire que votre page réagisse aux actions que vous faites sur la page, ses dimensions etc il va falloir faire du JavaScript.
0
Je comprends,

Merci d'avoir répondu si vite, je vais donc chercher du côté du Javascript comment réaliser cet effet.

La bonne nouvelle, c'est que c possible ;-)

Maintenant, ya plus qu'à...

Merci pour votre patience,
0
Utilisateur anonyme
1 mars 2011 à 16:40
Bon courage !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Merci...Et peut-être à bientôt ;D...
0