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

Pour toutes les discussions sur le code client, HTML et CSS
Répondre
Jpe54
Messages : 58
Enregistré le : 10 mars 2017, 14:11

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

Message par Jpe54 » 22 mai 2021, 18:14

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,

Avatar du membre
webmaster
Administrateur du site
Messages : 560
Enregistré le : 28 févr. 2017, 15:19

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

Message par webmaster » 22 mai 2021, 18:29

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.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Jpe54
Messages : 58
Enregistré le : 10 mars 2017, 14:11

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

Message par Jpe54 » 22 mai 2021, 19:56

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é...

Répondre