Image qui se déforme.
Fermé
Saafty
Messages postés
37
Date d'inscription
mardi 7 février 2017
Statut
Membre
Dernière intervention
1 décembre 2018
-
1 déc. 2018 à 16:01
Wakatta - 1 déc. 2018 à 17:13
Wakatta - 1 déc. 2018 à 17:13
A voir également:
- Image qui se déforme.
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Google recherche par image - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Image - Guide
1 réponse
Salut,
Bon déjà vous mettez une image orientée portrait dans un rectangle orienté paysage... donc forcément ça n'aidera pas, c'est simplement logique comme rentrer un rectangle dans un rond ou un rond dans un rectangle avec les jeux d'éveil pour bambins^^.
Ensuite pas de skype ou communication en direct. On est pas à votre service et cela permet à tout ceux qui auront la même question d'avoir la réponse aussi.
Pour vous répondre(cela aurais aidé que vous mettiez le code exact comme stipulé dans la charte d'utilisation du forum dont vous n'avez peu être pas pris connaissance parce que j'ai pas envie d'aller regarder le code pour chercher l'endroit exact où il y a les quelques lignes correspondantes: celles du CSS et celle de la balise html de l'image):
Ma solution la plus simple et la plus efficace: recadrer l'image avec un logiciel comme gimp/photoshop d'autant plus que ça met une plombe à charger alors qu'il n'y a qu'une image à afficher-la plupart des visiteurs seront partis avant que ça ait finit de charger. Ce qui veut dire aussi que votre image est dans une résolution trop élevée pour le web, passez en 72 ppi(72 pixels par pouces/inchs en anglais ) ça permettra d'avoir une image adaptée au web bien que vous y perdez en définition c'est ce qu'il faut faire. C'est aussi le plus simple puisque ça ne fait appel à aucun code superflu.
"J'ai déjà essayer max-witdh, max-height" à quoi bon ça ne sert pas à ça mais à indiquer la valeur max en largeur et/ou hauteur que peut prendre l'image.
Vous devez indiquer les tailles en utilisant la valeur en pourcentage(je n'ai pas votre code donc je ne sait pas si vous avez fait l'erreur d'utiliser l'image en image de fond avec la règle CSS background-image mais si c'est le cas utiliser simplement une image imbriquée dans son contenu).
Le pourcentage permet une dimension qui s'adaptera à toutes les tailles d'écrans possible, donc tout les visiteurs auront la même mise en page qui s'affiche, sinon ça ne sera pas le cas ce qui est gênant et provoque ce qu'on appelle des bugs d'affichages si l'espace dans l'écran est supérieur ou inférieur aux dimensions de références que vous avez utilisé. Donc des tailles relatives pour tout les éléments qui servent à la mise en page basé sur des dimensions partout où vous pouvez avoir des pixels.
Ensuite pour garder le proportions à moins de vous tracasser à calculer les ratio horizontal/vertical vous devez n'indiquer qu'une seule valeur pour la dimension soit width(largeur) soit height(hauteur) mais pas les 2 ce qui forcera à faire un ratio faux. Avec un seul le rapports de taille seront toujours conservés.
Pour avoir une couleur comme le fond vous avez simplement à ne pas mettre de couleur dans le container de l'image, par défaut il n'y en a pas(transparence). Vous pouvez mettre un couleur raccord ou un flou au moment de redimensionner l'image avec le logiciel de graphisme de votre choix(gimp est gratuit et libre d'utilisation donc il n'y a pas à se priver) mais cela sera un inconvénient si vous changez les couleurs de fond vous devrez refaire l'image pour qu'elle soit en rapport. Autant ne pas en mettre ou utilisez le CSS comme ceci:
Bon déjà vous mettez une image orientée portrait dans un rectangle orienté paysage... donc forcément ça n'aidera pas, c'est simplement logique comme rentrer un rectangle dans un rond ou un rond dans un rectangle avec les jeux d'éveil pour bambins^^.
Ensuite pas de skype ou communication en direct. On est pas à votre service et cela permet à tout ceux qui auront la même question d'avoir la réponse aussi.
Pour vous répondre(cela aurais aidé que vous mettiez le code exact comme stipulé dans la charte d'utilisation du forum dont vous n'avez peu être pas pris connaissance parce que j'ai pas envie d'aller regarder le code pour chercher l'endroit exact où il y a les quelques lignes correspondantes: celles du CSS et celle de la balise html de l'image):
Ma solution la plus simple et la plus efficace: recadrer l'image avec un logiciel comme gimp/photoshop d'autant plus que ça met une plombe à charger alors qu'il n'y a qu'une image à afficher-la plupart des visiteurs seront partis avant que ça ait finit de charger. Ce qui veut dire aussi que votre image est dans une résolution trop élevée pour le web, passez en 72 ppi(72 pixels par pouces/inchs en anglais ) ça permettra d'avoir une image adaptée au web bien que vous y perdez en définition c'est ce qu'il faut faire. C'est aussi le plus simple puisque ça ne fait appel à aucun code superflu.
"J'ai déjà essayer max-witdh, max-height" à quoi bon ça ne sert pas à ça mais à indiquer la valeur max en largeur et/ou hauteur que peut prendre l'image.
Vous devez indiquer les tailles en utilisant la valeur en pourcentage(je n'ai pas votre code donc je ne sait pas si vous avez fait l'erreur d'utiliser l'image en image de fond avec la règle CSS background-image mais si c'est le cas utiliser simplement une image imbriquée dans son contenu).
Le pourcentage permet une dimension qui s'adaptera à toutes les tailles d'écrans possible, donc tout les visiteurs auront la même mise en page qui s'affiche, sinon ça ne sera pas le cas ce qui est gênant et provoque ce qu'on appelle des bugs d'affichages si l'espace dans l'écran est supérieur ou inférieur aux dimensions de références que vous avez utilisé. Donc des tailles relatives pour tout les éléments qui servent à la mise en page basé sur des dimensions partout où vous pouvez avoir des pixels.
Ensuite pour garder le proportions à moins de vous tracasser à calculer les ratio horizontal/vertical vous devez n'indiquer qu'une seule valeur pour la dimension soit width(largeur) soit height(hauteur) mais pas les 2 ce qui forcera à faire un ratio faux. Avec un seul le rapports de taille seront toujours conservés.
Pour avoir une couleur comme le fond vous avez simplement à ne pas mettre de couleur dans le container de l'image, par défaut il n'y en a pas(transparence). Vous pouvez mettre un couleur raccord ou un flou au moment de redimensionner l'image avec le logiciel de graphisme de votre choix(gimp est gratuit et libre d'utilisation donc il n'y a pas à se priver) mais cela sera un inconvénient si vous changez les couleurs de fond vous devrez refaire l'image pour qu'elle soit en rapport. Autant ne pas en mettre ou utilisez le CSS comme ceci:
/* pour un effet type flou ici à associer au container de l'image* / background-color : rgba( 255, 255, 255, 0.4 ); /*-- les trois premiers chiffres correspondent à l'intensité de rouge, vert et bleu de 0 à 255, ici à 255 c'est du blanc. Le dernier chiffre indique une semi-transparence-ou valeur alpha- ici 0.4 indique 40% d'opacité (1étant le max 100% et 0 le minimum une transparence complète)*/
Modifié le 1 déc. 2018 à 17:19
Pour redimensionne l'image avec CSS c'est width OU height la propriété à utiliser et comme je l'ai dit vous devez utiliser une unité relative: % ou em , ce dernier correspond à la taille d'une hauteur de ligne typographique donc moins bien adapté pour ce cas de figure quoique quand on a l'habitude ça peut être pratique.