Bannière / images agrandies involontairement

[Shawn Gryffondor]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://hpu-test.forumactif.com/?tt=1

Description du problème

Bonsoir !

Je travaille sur le design de mon forum, souhaitant entre autre avoir une bannière qui prenne toute la largeur de la page comme on peut voir régulièrement.

J'ai repris un thème hitskin similaire n'étant pas programmateur. J'ai toutefois un problème qui vient probablement de l'image ou de l'hébergeur d'image.

https://2img.net/r/hpimg4/pics/114731HPUbannire.png

Celle-ci est déjà en 100% mais on peut l'agrandir avec le " + ". Je n'ai aucune idée du pourquoi. De plus, vous pouvez voir que c'est la version agrandie qui est prise en compte sur mon thème et ce n'est pas ce que je veux.

Cela fait des années que je n'ai plus touché à tout ça, je suis bien embêté...

Quelqu'un aurait-il la solution ?

Merci beaucoup !

[Oka.mi]

Bonjour,

Si le "+" est là c'est que l'image n'est pas à 100%. Elle fait 1920 × 840 pixels tout de même, donc il y a de grandes chances qu'elle dépasse la largeur de votre écran. L'image telle qu'affichée sur votre forum n'est donc pas agrandie mais bien à sa taille réelle, plus précisément, elle est centrée en haut de la page :

Code:

background-position: top center;

Dans la partie

Code:

body {
    background-attachment: scroll !important;
    background-color: #1a1b1d;
    background-image: url(https://img4.hostingpics.net/pics/114731HPUbannire.png);
    background-position: top center;
    background-repeat: no-repeat;
}

vous pouvez ajouter

Code:

background-size: 100%;

Chez moi ça donne ça


Est-ce le rendu final souhaité?

[Shawn Gryffondor]

Bonsoir Oka.mi, merci beaucoup c'est effectivement le rendu souhaité !

Le 1920 c'est la largeur de mon écran justement, j'ai fait la bannière à partir d'une impression d'écran du forum pour travailler plus à l'aise.

Je ne comprends pas pourquoi du coup, on me propose l'agrandissement après avoir terminé la création sous PS.
D'ailleurs le problème est réglé en indiquant background size 100% non ?

[Shawn Gryffondor]

Bonsoir, j'ai cette fois-ci le même problème sur ma barre de navigation.
Oka.mi, j'ai essayé de mettre ton code :

Code:

background-size: 100%;

dans le code suivant mais ça ne fonctionne pas :

Code:

#i_logo
{
height: 600px;
}

#i_icon_mini_index
{
width: 155px;
height: 122px;
background: url(https://img4.hostingpics.net/pics/482132HPUMenuaccueil.png);
}

Je me suis dit que si mes images paraissaient trop grandes, peut-être quand les réduisant sous Photoshop j'allais avoir le résultat recherché. Sauf que quelque soit la taille de mon image, une fois enregistrée elle est 40% plus grande que sur le logiciel !

Donc dans tous les cas l'image perd en qualité puisqu'elle ne veut pas se mettre à la taille voulue.

Je désespère...

[Shawn Gryffondor]

J'ai fini par réglé le problème !

En fait sur les ordinateurs en grande résolution, Chrome est en fait en 125% bien qu'il indique être en 100%

J'ai lu sur le forum d'aide de chrome qu'il fallait coller "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" /high-dpi-support=1 /force-device-scale-factor=1" ?dans le champ cible après avoir fait clique droit > propriétés en mode administrateur.

Mes images s'affichent maintenant en HD.

J'espère que mon message aidera d'autres personnes.