[Résolu] Récupérer dimensions d'un élément et l'utiliser dans conditio

Bonjour à tous et à toutes ,

Je travaille sur des portails informatiques que nos clients peuvent plus ou moins personnaliser. Ils peuvent notamment le faire en ajoutant leur logo. A ce propos on leur met qu'il faut "Une image de type png dont la taille ne dépasse pas 5M et les dimensions sont inférieures à 256px"
Le problème c'est que 256px de large c'est encore trop, notamment sur mobile où ça dépasse parfois.

En apprenant Sass, j'ai vu comme quoi on pouvait créer des conditions avec @if.
En partant de ça, je souhaiterais créer une condition qui dirait "si le logo est plus large que 256 px alors réduis-le (proportionnellement) à 200 px"

Problème : je ne sais pas, à l'avance, quelle est la largeur du logo.

En cherchant sur Internet, j'ai vu qu'on pouvait connaitre les dimensions d'un élément grâce à Javascript, mais je ne sais pas 1) comment récupérer la largeur et 2) comment la mettre dans ma condition.

Est-ce que c'est possible de créer ce genre de condition ? Si oui, comment ?

D'avance merci pour vos réponses.
Bonne journée

Salut,

Je trouve qu'il y a plusieurs soucis ou alors c'est moi qui ai compris de travers...

Premièrement le SASS c'est un langage compilé, donc meme si tu fait un if au final le site est compilé en CSS et il ne reste rien de ton if. Il faut gérer ca en CSS directement (voir en Js mais à mon avis il n'y en a pas besoin).

spip93 a écrit :
Le problème c'est que 256px de large c'est encore trop, notamment sur mobile où ça dépasse parfois.
[...]
"si le logo est plus large que 256 px alors réduis-le (proportionnellement) à 200 px"

Et si il fait 255px on le laisse a 255px ? pourquoi ne pas tout réduire à 200px ? Pourquoi ne pas juste mettre une max-width a 200px ou a X% de ta page pour etre sur que ca rentre ? j'ai du mal a comprendre le soucis du coup...

j'ai pas bien comprit si tu voulais redimensionner l'image ou indiquer à l'utilisateur que l'image est trop grande. tu peux en javascript récupérer les dimensions d'une image : https://www.codegrepper.com/code-examples/javascript/get+image+file+width+javascript

spip93 a écrit :
Bonjour à tous et à toutes ,

Je travaille sur des portails informatiques que nos clients peuvent plus ou moins personnaliser. Ils peuvent notamment le faire en ajoutant leur logo. A ce propos on leur met qu'il faut "Une image de type png dont la taille ne dépasse pas 5M et les dimensions sont inférieures à 256px"...

Bonjour, comme déjà dit, SASS permet de compiler des feuilles de styles et n'a aucune interaction ni de vue sur la partie HTML de ton site, c'est un compilateur ni plus ni moins.

Je suis de mon coté surpris par la taille maximale du fichier ... pour une image de 256px max de large. Cela te fait de logo (H)HD, peut-être est ce une erreur de frappe de ton coté ou de lecture du mien.

Ensuite, pour te répondre et comme déjà évoqué par Laurent, il y a max-width ou max-height , mais tu as aussi clamp() qui peut t'aider à moduler la taille du logo .

- définition sur mozilla https://developer.mozilla.org/fr/docs/Web/CSS/clamp()
- supports https://caniuse.com/?search=clamp()

par exemple :

width: clamp(100px, 20vw, 200px);

qui dit que la largeur doit-etre de 20vw (20% de la largeur du viewport) mais pas plus petit que 100px ni plus grand que 200px. la taille variera de 100px à 200px si le viewport à une largeur comprise entre 500px et 1000px. En dehors de ces largeurs ce seront les tailles MIN ou MAX qui seront appliquées.


Cdt
Modifié par gcyrillus (13 Apr 2021 - 17:19)

Bonjour,

Merci à tous pour vos réponses . Effectivement, je vais soit partir sur un max-width de _Laurent, soit sur la solution de clamp (que je ne connaissais pas, merci gcyrillus).
Ça sera plus simple que des calculs savants à base de if.

En tout cas, encore merci
Modifié par spip93 (15 Apr 2021 - 09:05)