Img plein écran gardant proportions
samroud
Messages postés
13
Date d'inscription
Statut
Membre
Dernière intervention
-
notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention -
notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je souhaite afficher une image en plein écran sur mon site internet. Par contre, je souhaite que l'image garde ses proportions... J'arrive à le faire en flash, mais je ne souhaite pas utiliser cette technique pour mon site...
Voici l'exemple d'un site internet qui utilise la technique que je souhaite reprendre:
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
L'image de fond s'adapte automatiquement en fonction de la hauteur et de la largeur de la fenêtre...
Quelqu'un a-t-il donc la solution? Javascript, CSS,...?
Merci d'avance!!
je souhaite afficher une image en plein écran sur mon site internet. Par contre, je souhaite que l'image garde ses proportions... J'arrive à le faire en flash, mais je ne souhaite pas utiliser cette technique pour mon site...
Voici l'exemple d'un site internet qui utilise la technique que je souhaite reprendre:
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
L'image de fond s'adapte automatiquement en fonction de la hauteur et de la largeur de la fenêtre...
Quelqu'un a-t-il donc la solution? Javascript, CSS,...?
Merci d'avance!!
A voir également:
- Img plein écran gardant proportions
- Double ecran - Guide
- Capture d'écran whatsapp - Accueil - Messagerie instantanée
- Fichier img - Télécharger - Photo & Graphisme
- Retourner ecran pc - Guide
- Capture d'écran samsung - Guide
15 réponses
J'ai trouvé un meilleur exemple: http://whereswalden.com/files/mozilla/background-size/more-examples.html
<style type="text/css">
body {
background-repeat: no-repeat;
background-image: url(montagne.jpg);
margin:0; padding:0; width:100%; overflow:hidden;
}
#background { position:absolute; z-index:1; width:100%; }
</style>
</head>
<body >
<img id="background" src="montagne.jpg" />
</body>
en fait l'astuce est de ne pas mettre de width pour ne pas casser le ratio !
body {
background-repeat: no-repeat;
background-image: url(montagne.jpg);
margin:0; padding:0; width:100%; overflow:hidden;
}
#background { position:absolute; z-index:1; width:100%; }
</style>
</head>
<body >
<img id="background" src="montagne.jpg" />
</body>
en fait l'astuce est de ne pas mettre de width pour ne pas casser le ratio !
Oui mais ça va venir...
Sinon, l'exemple https://www.alsacreations.com/xmedia/billets/arriere-plan2.htm ne fonctionne pas, car l'image ne garde pas ses propositions!...
Sinon, l'exemple https://www.alsacreations.com/xmedia/billets/arriere-plan2.htm ne fonctionne pas, car l'image ne garde pas ses propositions!...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
@lezao Merci pour cette solution, mais l'image s'adapte seulement sur la largeur...
Sur le site https://www.j3l.ch/fr/Z10488/neuchatel-tourisme l'image s'adapte sur la largeur et sur la hauteur, en fonction de la proportion de la fenêtre du navigateur et de l'image!!
Sur le site https://www.j3l.ch/fr/Z10488/neuchatel-tourisme l'image s'adapte sur la largeur et sur la hauteur, en fonction de la proportion de la fenêtre du navigateur et de l'image!!
Il est strictement impossible de garder un ratio si la taille hauteur et largeur se modifient en meme temps, ce qui est logique, a moins que l'ecran soit aux proportions axacte de l'image, donc il est important de specifier une seule valeur soit hauteur ou largeur pour que l'autre valeur s'adapte automatiquement et garde ainsi le ratio (soit les proportions), si vous adaptez les deux, il est impossible de garder les proportion (dit ratio )
Alors pourquoi sur cet exemple ça fonctionne dans les deux sens:
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
???
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
???
si ça fonctionne chez eux, c'est que apparament ils ont ajouté un elment blanc en haut de page, ce qui permet de compensser la difference, c'est un trompe l'oeil en quelque sorte, a mon avis.
Vous pouvez le voir, en faisant clique droit, "enregistrer l'arriere plant sous", et vous aurez une fine lameel bla,nche en degradé et non pas une image, c'est donc bien une compenssation de la taile par l'ajout d'un element suplementaire, a notez que cela ne fonctionne uniquement que si la partie haute ou (basse...) a une couleur unie.
Je ne vois aucune bande blanche sur la photo....
Voici le lien d'une image utilisée en fond d'écran:
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
A mon avis, l'utilisation en plein écran se fait en javascript:
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
Voici le lien d'une image utilisée en fond d'écran:
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
A mon avis, l'utilisation en plein écran se fait en javascript:
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
tu n'a pas compris car tu dis exxactement ce que je dis en disant que je fais erreur, je sais ce que je dis.... bref c'est un peu quiproquo tout ça ça parait evident que mettre un carré dans un rectangle sans laisser d'espace vide est impossible non ? il ne me semble pas avoir dit le contraire ? non tu as mal compris monsieur plusoyeur (blague) et la blague vient du fait que je te nomme (monsieur plusoyeur) en toute sympathie.
tu n'a pas compris car tu dis exxactement ce que je dis en disant que je fais erreur,
Ahem... Va falloir intégrer le jargon des forums lezao... Je n'ai jamais dit que tu faisais une erreur, au contraire.
"Je plussoie" veut dire que je mets +1, c'est à dire que je confirme tes dires et que j'en remets une couche.
https://fr.wiktionary.org/wiki/plussoyer
Ahem... Va falloir intégrer le jargon des forums lezao... Je n'ai jamais dit que tu faisais une erreur, au contraire.
"Je plussoie" veut dire que je mets +1, c'est à dire que je confirme tes dires et que j'en remets une couche.
https://fr.wiktionary.org/wiki/plussoyer
la solution : (je tutoi c'est plus simple)
tu modifies ton image dans photoshop et tu ajoutes un dégardé blanc.
Tu laisses le fond de ta page blanche sur la quelle tu superposes ton image avec le dégradé.
puis tu mets width: 100 % en laissant le height vide.
de cette maniere quand on etire la page, l'image s'ecarte en gardant sa largeur mais la hauteur elle s'adpate, donc si ton image est plus petite que l'ecran le haut de ton image va descendre pour garder le ratio avec la largeur mais etant donné que le haut de ton image est blanche contre un fond blanc (monochrome) on ne verra pas que l'image est descendu , ce qui a était fait dans ton example
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
C'est du bidouillage il y peut etre une autre methode mais celle ci devrait fonctionner...
tu modifies ton image dans photoshop et tu ajoutes un dégardé blanc.
Tu laisses le fond de ta page blanche sur la quelle tu superposes ton image avec le dégradé.
puis tu mets width: 100 % en laissant le height vide.
de cette maniere quand on etire la page, l'image s'ecarte en gardant sa largeur mais la hauteur elle s'adpate, donc si ton image est plus petite que l'ecran le haut de ton image va descendre pour garder le ratio avec la largeur mais etant donné que le haut de ton image est blanche contre un fond blanc (monochrome) on ne verra pas que l'image est descendu , ce qui a était fait dans ton example
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
C'est du bidouillage il y peut etre une autre methode mais celle ci devrait fonctionner...
Je pense aussi que c'est du bidouillage et je ne pense pas que cette solution va fonctionner! J'attends de voir un exemple...! Je n'ai pas envie de voir un dégradé moche sur les bords de mon image!!
Encore une fois, je pense plutôt qu'il s'agisse une solution Javascript:
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
Encore une fois, je pense plutôt qu'il s'agisse une solution Javascript:
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
bon je ne vais pas insister plus si tu ne crois pas a ma theorie, mais je tient a preciser, que si tu arrives a recuperer le fond d'ecrant du site demo, en cliquant vers le haut, tu obtiens une petite lammelle degradé blanche en png.
c'est bien la preuve que pour eux la solution a été de rajouter un dégardé blanc , transparent qui s'affiche en premier plan au dessus de l'image et comme dit monsieur "notobe" , on ne peut pas mettre un carré dans un rectangle ( ça c'est moi qui le dit mais c'est la ou il voulait en venir) donc javascript ou pas javascript peut importe la methode c'est logique.
Soit on garde le ratio et on crope ( c'est a dire couper), soit on etire l'image et on perd le ratio, soit on fait un trompe l'oeil genre degradé et on garde le ratio, il n'y aura aucune autre solution, ceci étant bon courage a toi....
c'est bien la preuve que pour eux la solution a été de rajouter un dégardé blanc , transparent qui s'affiche en premier plan au dessus de l'image et comme dit monsieur "notobe" , on ne peut pas mettre un carré dans un rectangle ( ça c'est moi qui le dit mais c'est la ou il voulait en venir) donc javascript ou pas javascript peut importe la methode c'est logique.
Soit on garde le ratio et on crope ( c'est a dire couper), soit on etire l'image et on perd le ratio, soit on fait un trompe l'oeil genre degradé et on garde le ratio, il n'y aura aucune autre solution, ceci étant bon courage a toi....
Pas du tout. Et si tu lisais mes réponses, peut-être que tu comprendrais ?
https://forums.commentcamarche.net/forum/affich-18127085-img-plein-ecran-gardant-proportions#22
[edit] l'ancre ne fonctionne pas : remonte le topic et regarde la réponse que je t'ai donnée plus haut ( #22)
https://forums.commentcamarche.net/forum/affich-18127085-img-plein-ecran-gardant-proportions#22
[edit] l'ancre ne fonctionne pas : remonte le topic et regarde la réponse que je t'ai donnée plus haut ( #22)
