Adapter l'image d'un cadre à la résolution écran
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Adapter l'image d'un cadre à la résolution écran
Description du problème
Bonjour,Je sais que cette question à été posée plusieurs foi. J'ai ratissé de nombreux sujets à ce propos, et j'ai trouvé de nombreux codes différents pour résoudre mon problème, mais je ne sais pas où les placer dans mon codage pour résoudre mon problème.
Sur mon forum, j'utilise ce code pour faire un cadre sympathique pour les présentations. Seulement voilà, j'ai remarqué que sur certaines résolution d'écrans, le côté droit de l'image est coupé.
- Code:
<br><div style="center; background-image: url('MONIMAGE'); border-radius: 30px; color:white; border: 3px solid darkblue;padding:12px;"></div>
J'aimerais trouver un code pour adapter la taille de mon image à la résolution, afin qu'elle s'affiche toujours complète. Seulement, encore une fois, chaque fois que j'ai trouvé un code servant à cela, je ne trouvait pas comment l'intégrer à mes codes déjà existants. /: Mon co' fonda et moi débutons vraiment là dedans ^^'
Re: Adapter l'image d'un cadre à la résolution écran
Bonjour,
Si l'image de fond doit toujours être complète, quitte à ne pas recouvrir tout le cadre, alors il faut utiliser background-size:contain;
Si l'image de fond doit couvrir tout le cadre, alors la taille optimale sera obtenue en utilisant background-size:cover;
Si l'image de fond doit toujours être complète, quitte à ne pas recouvrir tout le cadre, alors il faut utiliser background-size:contain;
- Code:
<br><div style="background-image:url('MONIMAGE'); background-size:contain; border-radius:30px; color:white; border:3px solid darkblue; padding:12px;"></div>
Si l'image de fond doit couvrir tout le cadre, alors la taille optimale sera obtenue en utilisant background-size:cover;
- Code:
<br><div style="background-image:url('MONIMAGE'); background-size:cover; border-radius:30px; color:white; border:3px solid darkblue; padding:12px;"></div>
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
Re: Adapter l'image d'un cadre à la résolution écran
Tout d'abord, merci pour la réponse
Je viens d'essayer les codes, malheureusement, ils ne résolvent qu'à moitié le soucis.
Avec le premier, l'image n'est plus coupée sur le côté, mais certains ont l'image qui se double sur le côté droit.
Avec le deuxième, l'image ne se double pas sur le côté, mais les autres ont toujours l'image coupée sur le côté droit.
Je viens d'essayer les codes, malheureusement, ils ne résolvent qu'à moitié le soucis.
Avec le premier, l'image n'est plus coupée sur le côté, mais certains ont l'image qui se double sur le côté droit.
Avec le deuxième, l'image ne se double pas sur le côté, mais les autres ont toujours l'image coupée sur le côté droit.
Re: Adapter l'image d'un cadre à la résolution écran
Serait-il possible de voir le problème directement ? Ça serait beaucoup plus simple de vous aider.
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
Re: Adapter l'image d'un cadre à la résolution écran
Bien sûr ^^
Moi j'ai exactement l'image que j'ai crée à l'origine: https://2img.net/image.noelshack.com/fichiers/2018/27/6/1530993515-nico.png
Une bande de chaque côté, exactement ce à quoi c'est censé ressembler.
Alors, un membre à ce résultat quand il regarde la fiche: https://i.servimg.com/u/f15/19/53/43/48/captur10.png
Une bande à gauche, deux bande à droite.
Mon co-fonda à ce résultat là: https://2img.net/image.noelshack.com/fichiers/2018/27/6/1530993597-fond.png
Juste une bande à gauche, mais l'image est coupée à droite. Quand il baisse le zoom de sa page internet, l'image apparaît comme sur mon ordinateur, mais je ne peux pas vraiment je permettre de demander à tous mes membres de changer le zoom de leur page ^^'
C'est pourquoi j'aurais aimé un code qui adapte l'image à la résolution puisque le problème semble venir de là.
Moi j'ai exactement l'image que j'ai crée à l'origine: https://2img.net/image.noelshack.com/fichiers/2018/27/6/1530993515-nico.png
Une bande de chaque côté, exactement ce à quoi c'est censé ressembler.
Alors, un membre à ce résultat quand il regarde la fiche: https://i.servimg.com/u/f15/19/53/43/48/captur10.png
Une bande à gauche, deux bande à droite.
Mon co-fonda à ce résultat là: https://2img.net/image.noelshack.com/fichiers/2018/27/6/1530993597-fond.png
Juste une bande à gauche, mais l'image est coupée à droite. Quand il baisse le zoom de sa page internet, l'image apparaît comme sur mon ordinateur, mais je ne peux pas vraiment je permettre de demander à tous mes membres de changer le zoom de leur page ^^'
C'est pourquoi j'aurais aimé un code qui adapte l'image à la résolution puisque le problème semble venir de là.
Re: Adapter l'image d'un cadre à la résolution écran
ok, essayez ceci, qui devrait prendre en compte seulement la largeur du cadre et non pas sa surface globale :
- Code:
<br><div style="background-image:url('MONIMAGE'); background-size:100% auto; border-radius:30px; color:white; border:3px solid darkblue; padding:12px;"></div>
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
Re: Adapter l'image d'un cadre à la résolution écran
Impeccable!
On voit tous l'image entière, elle remplit tout le cadre, c'est parfait! Merci beaucoup ^^
On voit tous l'image entière, elle remplit tout le cadre, c'est parfait! Merci beaucoup ^^
Sujets similaires
» Adapter une image en fond à la résolution de l'écran.
» Adapter sa bannière à toutes les résolution
» Adapter un fond d'écran.
» Adapter une image à la taille de l'écran
» Bannière et adaptation a la résolution ecran .
» Adapter sa bannière à toutes les résolution
» Adapter un fond d'écran.
» Adapter une image à la taille de l'écran
» Bannière et adaptation a la résolution ecran .
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum