Menu

Image qui se déforme.

Messages postés
39
Date d'inscription
mardi 7 février 2017
Dernière intervention
1 décembre 2018
- - Dernière réponse :  Wakatta - 1 déc. 2018 à 17:13
Bonjour à tous et toutes ,

Je me permets d'écrire ici car je n'arrive pas à afficher mon image correctement.

Y aurait-il quelqu'un avec Skype et TeamWiever pour m'aider s'il vous plait?

Je met le liens de la page et vous aller comprendre ce qui ne vas pas ;

http://leustudio.com/projectdetails1.html

J'ai déjà essayer max-witdh, max-height

Y a t-il une solution pour que l'image soit proportionnelle à sa taille et que le reste de l'espace qui n'est pas occupé soit flou ou bien de la couleur du fond?

Merci d'avance.
Afficher la suite 

Votre réponse

1 réponse

0
Merci
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:
/* 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)*/
note: pour compléter lors du redimensionnement de l'image pensez aussi à baisser les tailles longueur/largeur(en conservant le ratio bien sûr) afin que l'image soit d'une taile adéquate, elle ne doit pas dépasser 2 Mo(méga-octets) et autour de 1,4mo vous aurez une qualité (largement)suffisante en gardant une qualité potable pour un temps de chargement rapide même pour les connexions les moins rapide(ADSL, 3 et 4g...).
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.
Commenter la réponse de Wakatta