Image se retournant toutes seule
- Accueil
- Forum
- Programmation
- HTML / CSS
- Image se retournant toutes seule
mister1610 Le 31 juillet 2019 à 10:19 (Édité le 1 janvier 1970 à 01:00)
En programmant pour mon site un problème est survenu, les images se retourne toutes seule. je m'explique.
J'ai fait un système d'un d'article en m'inspirant des vidéos de PrimFX et j'ai r'ajouter l'insertion d'image donc tout fonctionne très bien jusque là. L'image est bien enregistré dans le dossier voulu puis dans le bon sens. Puis quand je veut en importer pour les afficher bah elles font une rotation de 180°.
Je vous remercie de vos réponse
SkinDePewDiePie_ Le 31 juillet 2019 à 20:15 (Édité le 1 janvier 1970 à 01:00)
Alors si t'a ce problème vérifie au niveau des fichiers CSS.
Sinon tu peux aussi ajouter un fichier CSS qui contient ce code:
img{
transform: rotate(180deg);
}
Je t'explique en gros l'image va être à l'endroit normalement si je me suis pas trompé 😀
En te souhaitant une bonne journée
-Matteo
mister1610 Le 1 août 2019 à 10:25 (Édité le 1 janvier 1970 à 01:00)
Merci de ta réponse j'avais déjà vu cette solution mais pas toutes les images se retourne automatiquement seulement certaines donc j'avais pensé à faire un algorithme détecter la position de l'image mais je ne crois pas que sa soit réalisable.
SkinDePewDiePie_ Le 1 août 2019 à 14:56 (Édité le 1 janvier 1970 à 01:00)
Il faudrait faire un système en JS...
Si tu veux je peux te le faire:
var img = document.getElementsByTagName("img");
for(var i = 0; i < img.length; i++){
$(img).css("transform", "rotate(180deg)");
}
Bien sur pense à importer jQuery, sinon ca ne marchera pas...
D'ailleurs tu peux tester le code ici: https://jsfiddle.net/69yns7jw/ (bon c'est des paragraphes mais c'est le même principe.)
mister1610 Le 1 août 2019 à 17:33 (Édité le 1 janvier 1970 à 01:00)
SkinDePewDiePie_ Le 1 août 2019 à 18:38 (Édité le 1 janvier 1970 à 01:00)
Bah au pire, j'ai une idée ceux qui s'affichent à l'envers tu leur met leur la classe return180DegJS et ceux qui sont a l'endroit tu met pas la classe.
Et du coup dans le js faudrait juste remplacer cette ligne:
var img = document.getElementsByTagName("img");Par:
var img = document.getElementsByClassName("return180DegJS");Voila la ça devrait règler ton souci, mais je ne comprends pas comment c'est possible...
mister1610 Le 2 août 2019 à 10:35 (Édité le 1 janvier 1970 à 01:00)
SkinDePewDiePie_ Le 3 août 2019 à 09:37 (Édité le 1 janvier 1970 à 01:00)
Tu peux m'envoyer un screen stp et t'es en local?? Si oui passe à XAMPP au lieu de WAMP sinon le contraire. Et si t'a un hébergement en ligne essaye de refaire la page du site sur l’hébergement, tu peux vite fait tester AlwaysData c'est gratuit (pour voir si le problème viens des images ou de l'hebergeur). Et essaye aussi de regarder tes fichiers CSS, JS, ou balise <style> pour voir si le problème viens pas de la.
mister1610 Le 4 août 2019 à 19:29 (Édité le 1 janvier 1970 à 01:00)
SkinDePewDiePie_ Le 5 août 2019 à 10:21 (Édité le 5 août 2019 à 10:53)
Essaye de redémarrer/mettre à jour Apache, sinon fait une copie de ton site, désinstalle puis réinstalle XAMPP.
Essaye d’héberger ton site sur AlwaysData, ça résoudra le problème je pense...
-Matteo
mister1610 Le 7 août 2019 à 19:32 (Édité le 1 janvier 1970 à 01:00)
Je ne suis pas sur à 100% de ma réponse mais il me semble que l'image se retour qu'elle a été retourner dans l'explorateur windows et du coup quand je l'importe elle reprend la rotation qu'elle devait avoir au début.
SkinDePewDiePie_ Le 7 août 2019 à 21:57 (Édité le 1 janvier 1970 à 01:00)
Suis ma méthode que j'ai donné plus haut.
Bonjour,Et envoye moi un screen après avoir fait ses manips.
Essaye de redémarrer/mettre à jour Apache, sinon fait une copie de ton site, désinstalle puis réinstalle XAMPP.
Essaye d’héberger ton site sur AlwaysData, ça résoudra le problème je pense...
-Matteo
mister1610 Le 9 août 2019 à 23:42 (Édité le 1 janvier 1970 à 01:00)
Profil introuvable Le 17 août 2019 à 22:41 (Édité le 1 janvier 1970 à 01:00)
Est-ce que tu peux donner l'adresse URL pour que je puisse jetez un coup d'oeil au code complet ? 😉