Image adaptive
Nhjm
Messages postés
41
Statut
Membre
-
Nhjm Messages postés 41 Statut Membre -
Nhjm Messages postés 41 Statut Membre -
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 <center> est périmé mais je ne sais pas quoi utilisé d'autre)
Mon CSS
Le problème à lieu pour toutes mes images sauf celle du background pas présent dans mes codes.
Merci à 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 <center> est périmé mais je ne sais pas quoi utilisé d'autre)
<center><img class="conv" src="conversation1.PNG" srcset="mon-imageHD.jpg 2x"></center>
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
A voir également:
- Image adaptive
- Image iso - Guide
- Légender une image - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Image gratuite - Guide
2 réponses
Salut,
vu que vous indiquez une valeur fixe(dite absolue) cela ne pourra effectivement pas s'adapter.
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.
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.
