Sujet Précédent Sujet Suivant

Img plein écran gardant proportions

Fermé
samroud Messages postés 13 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 11 décembre 2012 - 13 juin 2010 à 14:54
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 - 13 juin 2010 à 18:51
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!!
A voir également:

15 réponses

Réponse 1 / 15
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
13 juin 2010 à 15:09
https://www.alsacreations.com/actu/lire/97-faire-un-arriere-plan-etirable.html
0
Réponse 2 / 15
samroud Messages postés 13 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 11 décembre 2012
13 juin 2010 à 15:13
J'ai trouvé un meilleur exemple: http://whereswalden.com/files/mozilla/background-size/more-examples.html
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
Modifié par notobe le 13/06/2010 à 15:15
background-size est du css3 et n'est pas encore implémenté correctement par tous les navigateurs.
0
Réponse 3 / 15
lezao Messages postés 469 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 14 août 2016 36
13 juin 2010 à 15:16
<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 !
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
13 juin 2010 à 15:18
C'est la méthode expliquée dans le tuto que j'ai indiqué...
0
Réponse 4 / 15
samroud Messages postés 13 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 11 décembre 2012
13 juin 2010 à 15:17
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!...
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
13 juin 2010 à 15:21
Je cite :
«si vous voulez que les proportions soient gardées, il vous suffit de ne spécifier que la dimension qui devra s'élargir (width OU height)... l'autre dimension va s'adapter mais dans ce cas n'occupera plus 100% de l'espace »

cqfd
0
samroud Messages postés 13 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 11 décembre 2012
13 juin 2010 à 15:25
Donc, faut-il passer par du Javascript ou du CSS3?
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
Modifié par notobe le 13/06/2010 à 16:34
oui, et encore... ça ne réglera pas le pb du ratio très bien expliqué par lezao
0

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

Posez votre question
Réponse 5 / 15
lezao Messages postés 469 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 14 août 2016 36
13 juin 2010 à 15:17
ne pas mettre : background-image: url(montagne.jpg);
erreur de ma part....
0
Réponse 6 / 15
samroud Messages postés 13 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 11 décembre 2012
13 juin 2010 à 15:20
@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!!
0
Réponse 7 / 15
lezao Messages postés 469 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 14 août 2016 36
13 juin 2010 à 15:28
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 )
0
Réponse 8 / 15
samroud Messages postés 13 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 11 décembre 2012
Modifié par samroud le 13/06/2010 à 15:30
Alors pourquoi sur cet exemple ça fonctionne dans les deux sens:
https://www.j3l.ch/fr/Z10488/neuchatel-tourisme
???
0
Réponse 9 / 15
lezao Messages postés 469 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 14 août 2016 36
13 juin 2010 à 16:29
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.
0
Réponse 10 / 15
lezao Messages postés 469 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 14 août 2016 36
13 juin 2010 à 16:32
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.
0
Réponse 11 / 15
samroud Messages postés 13 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 11 décembre 2012
13 juin 2010 à 16:38
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
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
13 juin 2010 à 16:46
Les images sont aléatoires, ce n'est pas toujours celle-là.
Et je plussoie ce que dit lezao. C'est de toute de façon impossible, par quelque méthode que ce soit, de ne pas déformer l'image si on cherche à ce qu'elle s'étire des deux côtés en même temps.

Géométriquement impossible !
0
lezao Messages postés 469 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 14 août 2016 36
Modifié par lezao le 13/06/2010 à 16:53
tu n'as pas compris monsieur plusoyeur (blague). c'est bien ce que je dis dans mon commentaire, c'est impossible, si l'image garde son ratio c'est qu'elle est cropé forcement.
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
13 juin 2010 à 16:57
tu n'as pas compris monsieur plusoyeur (blague)
Je n'ai pas compris quoi ? (car là, effectivement, je ne comprends pas la "blague")
0
lezao Messages postés 469 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 14 août 2016 36
Modifié par lezao le 13/06/2010 à 17:05
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.
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
Modifié par notobe le 13/06/2010 à 17:11
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
0
Réponse 12 / 15
samroud Messages postés 13 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 11 décembre 2012
13 juin 2010 à 17:06
En attendant je n'ai toujours pas la solution pour reproduire l'exemple que j'ai présenté...
0
Réponse 13 / 15
lezao Messages postés 469 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 14 août 2016 36
Modifié par lezao le 13/06/2010 à 17:16
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...
0
Réponse 14 / 15
samroud Messages postés 13 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 11 décembre 2012
13 juin 2010 à 17:15
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
0
Réponse 15 / 15
lezao Messages postés 469 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 14 août 2016 36
Modifié par lezao le 13/06/2010 à 17:26
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....
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
13 juin 2010 à 17:35
Et de plussoyer une fois de plus ;p
0
lezao Messages postés 469 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 14 août 2016 36
13 juin 2010 à 17:36
tu vas me désapointer.... qu'est ce qui te fait rigoler dans ce que je dit ? esprit de contradiction dévellopé non ?
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
Modifié par notobe le 13/06/2010 à 17:47
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)
0
lezao Messages postés 469 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 14 août 2016 36
13 juin 2010 à 18:46
y'a pas de problemes , je rigole ,ceci étant notre amis n'a pas l'air convaicu, peut-etre a t'il trouvé une réponse ailleurs....bonne continuation a tous ...
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
Modifié par notobe le 13/06/2010 à 18:54
ahhhhh, au moins 1 qui a compris (je parle du plussoiement bien sûr). Je commençais à désespérer ;-)
0