Conserver la taille d'une image quelque soit la dimension Ecran

[Jpe54]

Bonjour,

On me demande de faire en sorte que sur un écran de même résolution - par exemple HD 1920 x 1080 - que seul le nombre de vignette par ligne change mais pas leur la taille quelque soit la dimension en pouce de l'écran.

Vu via Google :
Pour convertir une longueur en cm en pixel , on multiplie par 37.7953 ou on divise par 0.0264.

En css je peux donc définir la taille maximal d'une image à 5 cm x 5 cm (5 / 0.0264 = 189 px)

Malheureusement la taille des pixels change fonction de la taille de l'écran à résolution identique...

De fait sur un 17 pouces il faut une image (jpg) :

Code : Tout sélectionner

max-width: 250px;
max-height:250px;

J'ignore quelle valeur donner en em au lieu de px....

Code : Tout sélectionner

resize : both;

Ne fonctionne pas...

Une balise @média impose de préparer des images de taille différentes...

Existe-il une solution en CSS ou autre pour fixer une taille des images affichées sur écran en centimètres ?

Amitiés à tous,

[webmaster]

Bonjour,

Je pense que la solution est dans les box flex en CSS
Une doc que je consulte souvent :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

C'est le navigateur qui se charge du retour à la ligne par rapport au contenu et à la largeur.

[Jpe54]

Merci pour ce retour.

Je ne connais absolument pas ce type de codage. Je vais étudier avec la plus grande attention ce type de codage.

Le but à atteindre sont des vignettes dont la dimension ne variera pas quelque soit l'écran utilisé...

[Seph33]

Salut,
Ton problème est super intéressant et touche à une limite assez connue du développement web : en effet, en CSS, on travaille principalement en pixels, en em/rem ou en pourcentage, mais très rarement en unités physiques comme le centimètre, car tout dépend de la densité de pixels (DPI/PPI) de l'écran.

Même si tu utilises `cm` en CSS (ce qui est possible), les navigateurs ne respectent pas toujours précisément cette unité, car ils adaptent l'affichage à la résolution et aux capacités de l'appareil, pas aux dimensions physiques réelles.

À ma connaissance, il n'existe **pas de méthode fiable** en pur CSS pour garantir une taille affichée fixe en centimètres sur tous les écrans. Les tailles varient selon la densité de pixels. Pour un affichage cohérent, on privilégie plutôt des **unités flexibles** comme `%` pour que les vignettes s'adaptent au conteneur, ou des `vw` (viewport width) qui sont proportionnels à la largeur de l'écran.

Exemple
```css
img {
width: 10vw;
height: auto;
max-width: 250px;
max-height: 250px;
}
```
Ainsi, le nombre d'images par ligne changera selon la largeur de l'écran sans que tu n'aies à gérer différents formats.

Sinon, pour vraiment obtenir un affichage fixe en taille réelle sur papier par exemple (et non sur écran), on utiliserait plutôt des unités comme `cm`, mais pas pour les écrans standards à cause des écarts de calibration.