Image adaptive Fermé

Question

Bonjour à tous, Je ne cherche pas à rendre mon site responsive, mais j'aimerais juste que mon image s'adapte. En effet, lorsque je suis sur mon ordi, mon image s'affiche comme dans mon code, mais lorsque j'affiche mon site sur un téléphone l'image est petite et cela oblige l'utilisateur à zoomer dessus. Voici mon HTML (je sais que la balise est périmé mais je ne sais pas quoi utilisé d'autre)

Mon CSS /*image conversation*/.conv{ border: 1px solid black; width: 580px; } Le problème à lieu pour toutes mes images sauf celle du background pas présent dans mes codes. Merci à tous ! Configuration: Windows / Chrome 86.0.4240.198

Pikachu · Answer

Salut,
vu que vous indiquez une valeur fixe(dite absolue) cela ne pourra effectivement pas s'adapter.

width: 580px;

Il faut donc changer cela, par exemple en indiquant une dimension en pourcentage(ici 580px ne correspondant qu'à votre écran ou les quelques personnes ayant exactement la même résolution d'écran tandis qu'un pourcentage sera toujors identique quelque soit la taille en pixel de l'écran de chacun).

Le lien suivant détaille la diférence entre les unités relatives et absolues et les contextes d'emploi de chacune:
https://www.w3.org/Style/Examples/007/units.fr.html



Il y a bien d'autres solutions(et nécessitées) pour le responsive design(ou design adaptatif en français) mais celle là est la plus basique.

Un bon moyen de tester est de changer votre résolution d'écran pour voir si le site s'affiche correctement en 800X600, et autres résolutions d'écran et surtout ne vous fiez pas uniquement à votre talle/résolution d'écran.
Un site étant fait pour être vu il doit donc être destiné à la majorité des utilisateurs.Vus avez aussi dans l'outil de développement des navigateurs la possibilité d'avoir un affichage dans les résolutions des appareils portables(tablettes/téléphone) ce qui permet de ne pas avoir à changer soit même la résolution et d'utiliser les dimensions en pixels des principaux appareils.


Voir aussi quelques recherches sur : responsive design, media queries CSS, web adaptative

et pour compléter les recommandations du WAI édictées par le consortium web et ayant pour but de garantir l'accès à tous le sites à tout le monde :
https://fr.wikipedia.org/wiki/Web_Accessibility_Initiative
Correspondre à ces exigences de qualités en plus d'enrichir le site en le rendant accessible et disponible pour tous est à la base d'un bon référencement donc des recommandations qui sont bonnes à prendre en compte.

Nhjm · Answer

Même si je modifie mon image avec des valeurs en % cela ne change rien sur un smartphone et l'image reste à la même taille

Image adaptive

2 réponses

Discussions similaires