Je n'ai pas la réponse, mais je voudrais juste faire préciser la question.
Le 10/05/2015 21:12, (Fra) a écrit :
Comment puis-je faire pour que le border-radius (d'une image) varie selon la taille de l'écran ?
Selon la taille de l'écran, ou selon la taille de la fenêtre ?
Pierre Maurette
Fra :
Bonjour/soir
Comment puis-je faire pour que le border-radius (d'une image) varie selon la taille de l'écran ? Sur petit écran (téléphone) l'arrondi est excessif.
J'aimerais une astuce "légère". Peut être une taille en em ou en % ?
border-radius: ?vw; ou peut-être mieux (plus souple): border-radius: calc(?(em|px) + ?vw); par exemple: border-radius: calc(1em + 1.7vw);
Autres voies:
Je suppose qu'un des problèmes (avec %) est que le "rayon" est en x et en y proportionnel à resp la largeur et la hauteur de l'image. Vous voudriez qu'il soit "absolu" (genre en px ou en em) mais proportionnel à la largeur de l'image, ou à sa diagonale, c'est pareil en définitive.
- Essayer juste avec ?em. Le résultat dépendra des valeurs "responsives" de font-size.
- Essayer avec ?px (ou ?em) à différents endroits du CSS orienté responsive que vous devez avoir.
- Un truc qui n'est pas spécialement "léger" (quoi que...) est de présenter les thumbs via SVG. C'est marrant, ça peut même s'animer pour pratiquement le même prix.
- Récupérer des attributs ou des variables dans un calc() ne semble pas fonctionner sur un nombre raisonnable de navigateurs.
- Calculer le % vers des px en js n'est vraiment pas la mer à boire. Il existe même de la triperie JQuery qui le fait.
En définitive, *personnellement*, je trouve que SVG, c'est fun et que ça vaut bien un peu de travail initial. Mais l'utilisation de vw devrait vous satisfaire.
-- Pierre Maurette
Fra :
Bonjour/soir
Comment puis-je faire pour que le border-radius (d'une image) varie
selon la taille de l'écran ?
Sur petit écran (téléphone) l'arrondi est excessif.
J'aimerais une astuce "légère". Peut être une taille en em ou en % ?
border-radius: ?vw;
ou peut-être mieux (plus souple):
border-radius: calc(?(em|px) + ?vw);
par exemple:
border-radius: calc(1em + 1.7vw);
Autres voies:
Je suppose qu'un des problèmes (avec %) est que le "rayon" est en x et
en y proportionnel à resp la largeur et la hauteur de l'image. Vous
voudriez qu'il soit "absolu" (genre en px ou en em) mais proportionnel
à la largeur de l'image, ou à sa diagonale, c'est pareil en définitive.
- Essayer juste avec ?em. Le résultat dépendra des valeurs
"responsives" de font-size.
- Essayer avec ?px (ou ?em) à différents endroits du CSS orienté
responsive que vous devez avoir.
- Un truc qui n'est pas spécialement "léger" (quoi que...) est de
présenter les thumbs via SVG. C'est marrant, ça peut même s'animer pour
pratiquement le même prix.
- Récupérer des attributs ou des variables dans un calc() ne semble pas
fonctionner sur un nombre raisonnable de navigateurs.
- Calculer le % vers des px en js n'est vraiment pas la mer à boire. Il
existe même de la triperie JQuery qui le fait.
En définitive, *personnellement*, je trouve que SVG, c'est fun et que
ça vaut bien un peu de travail initial. Mais l'utilisation de vw
devrait vous satisfaire.
Comment puis-je faire pour que le border-radius (d'une image) varie selon la taille de l'écran ? Sur petit écran (téléphone) l'arrondi est excessif.
J'aimerais une astuce "légère". Peut être une taille en em ou en % ?
border-radius: ?vw; ou peut-être mieux (plus souple): border-radius: calc(?(em|px) + ?vw); par exemple: border-radius: calc(1em + 1.7vw);
Autres voies:
Je suppose qu'un des problèmes (avec %) est que le "rayon" est en x et en y proportionnel à resp la largeur et la hauteur de l'image. Vous voudriez qu'il soit "absolu" (genre en px ou en em) mais proportionnel à la largeur de l'image, ou à sa diagonale, c'est pareil en définitive.
- Essayer juste avec ?em. Le résultat dépendra des valeurs "responsives" de font-size.
- Essayer avec ?px (ou ?em) à différents endroits du CSS orienté responsive que vous devez avoir.
- Un truc qui n'est pas spécialement "léger" (quoi que...) est de présenter les thumbs via SVG. C'est marrant, ça peut même s'animer pour pratiquement le même prix.
- Récupérer des attributs ou des variables dans un calc() ne semble pas fonctionner sur un nombre raisonnable de navigateurs.
- Calculer le % vers des px en js n'est vraiment pas la mer à boire. Il existe même de la triperie JQuery qui le fait.
En définitive, *personnellement*, je trouve que SVG, c'est fun et que ça vaut bien un peu de travail initial. Mais l'utilisation de vw devrait vous satisfaire.
-- Pierre Maurette
fra-PasDeSp
Pierre Maurette wrote:
border-radius: ?vw; ou peut-être mieux (plus souple): border-radius: calc(?(em|px) + ?vw); par exemple: border-radius: calc(1em + 1.7vw);
Autres voies:
Je suppose qu'un des problèmes (avec %) est que le "rayon" est en x et en y proportionnel à resp la largeur et la hauteur de l'image. Vous voudriez qu'il soit "absolu" (genre en px ou en em) mais proportionnel à la largeur de l'image, ou à sa diagonale, c'est pareil en définitive.
- Essayer juste avec ?em. Le résultat dépendra des valeurs "responsives" de font-size.
- Essayer avec ?px (ou ?em) à différents endroits du CSS orienté responsive que vous devez avoir.
- Un truc qui n'est pas spécialement "léger" (quoi que...) est de présenter les thumbs via SVG. C'est marrant, ça peut même s'animer pour pratiquement le même prix.
- Récupérer des attributs ou des variables dans un calc() ne semble pas fonctionner sur un nombre raisonnable de navigateurs.
- Calculer le % vers des px en js n'est vraiment pas la mer à boire. Il existe même de la triperie JQuery qui le fait.
En définitive, *personnellement*, je trouve que SVG, c'est fun et que ça vaut bien un peu de travail initial. Mais l'utilisation de vw devrait vous satisfaire.
Merci pour cette réponse complète. Je vais expérimenter. -- Fra
Pierre Maurette <maurette.pierre@free.fr> wrote:
border-radius: ?vw;
ou peut-être mieux (plus souple):
border-radius: calc(?(em|px) + ?vw);
par exemple:
border-radius: calc(1em + 1.7vw);
Autres voies:
Je suppose qu'un des problèmes (avec %) est que le "rayon" est en x et
en y proportionnel à resp la largeur et la hauteur de l'image. Vous
voudriez qu'il soit "absolu" (genre en px ou en em) mais proportionnel
à la largeur de l'image, ou à sa diagonale, c'est pareil en définitive.
- Essayer juste avec ?em. Le résultat dépendra des valeurs
"responsives" de font-size.
- Essayer avec ?px (ou ?em) à différents endroits du CSS orienté
responsive que vous devez avoir.
- Un truc qui n'est pas spécialement "léger" (quoi que...) est de
présenter les thumbs via SVG. C'est marrant, ça peut même s'animer pour
pratiquement le même prix.
- Récupérer des attributs ou des variables dans un calc() ne semble pas
fonctionner sur un nombre raisonnable de navigateurs.
- Calculer le % vers des px en js n'est vraiment pas la mer à boire. Il
existe même de la triperie JQuery qui le fait.
En définitive, *personnellement*, je trouve que SVG, c'est fun et que
ça vaut bien un peu de travail initial. Mais l'utilisation de vw
devrait vous satisfaire.
Merci pour cette réponse complète. Je vais expérimenter.
--
Fra
border-radius: ?vw; ou peut-être mieux (plus souple): border-radius: calc(?(em|px) + ?vw); par exemple: border-radius: calc(1em + 1.7vw);
Autres voies:
Je suppose qu'un des problèmes (avec %) est que le "rayon" est en x et en y proportionnel à resp la largeur et la hauteur de l'image. Vous voudriez qu'il soit "absolu" (genre en px ou en em) mais proportionnel à la largeur de l'image, ou à sa diagonale, c'est pareil en définitive.
- Essayer juste avec ?em. Le résultat dépendra des valeurs "responsives" de font-size.
- Essayer avec ?px (ou ?em) à différents endroits du CSS orienté responsive que vous devez avoir.
- Un truc qui n'est pas spécialement "léger" (quoi que...) est de présenter les thumbs via SVG. C'est marrant, ça peut même s'animer pour pratiquement le même prix.
- Récupérer des attributs ou des variables dans un calc() ne semble pas fonctionner sur un nombre raisonnable de navigateurs.
- Calculer le % vers des px en js n'est vraiment pas la mer à boire. Il existe même de la triperie JQuery qui le fait.
En définitive, *personnellement*, je trouve que SVG, c'est fun et que ça vaut bien un peu de travail initial. Mais l'utilisation de vw devrait vous satisfaire.
Merci pour cette réponse complète. Je vais expérimenter. -- Fra
fra-PasDeSp
Olivier Miakinen <om+ wrote:
Bonjour,
Je n'ai pas la réponse, mais je voudrais juste faire préciser la question.
Le 10/05/2015 21:12, (Fra) a écrit : > > Comment puis-je faire pour que le border-radius (d'une image) varie > selon la taille de l'écran ?
Selon la taille de l'écran, ou selon la taille de la fenêtre ?
Peut être la taille de la fenêtre effectivement. -- Fra
Olivier Miakinen <om+news@miakinen.net> wrote:
Bonjour,
Je n'ai pas la réponse, mais je voudrais juste faire préciser la
question.
Le 10/05/2015 21:12, fra-PasDeSp@M-alussinan.org (Fra) a écrit :
>
> Comment puis-je faire pour que le border-radius (d'une image) varie
> selon la taille de l'écran ?
Selon la taille de l'écran, ou selon la taille de la fenêtre ?
Peut être la taille de la fenêtre effectivement.
--
Fra
Je n'ai pas la réponse, mais je voudrais juste faire préciser la question.
Le 10/05/2015 21:12, (Fra) a écrit : > > Comment puis-je faire pour que le border-radius (d'une image) varie > selon la taille de l'écran ?
Selon la taille de l'écran, ou selon la taille de la fenêtre ?
Peut être la taille de la fenêtre effectivement. -- Fra
fra-PasDeSp
Pierre Maurette wrote:
Je suppose qu'un des problèmes (avec %) est que le "rayon" est en x et en y proportionnel à resp la largeur et la hauteur de l'image. Vous voudriez qu'il soit "absolu" (genre en px ou en em) mais proportionnel à la largeur de l'image, ou à sa diagonale, c'est pareil en définitive.
En fait j'ai déjà une des images qui a ses coins arrondis d'origine (sur 20px, dont 10px de rayon). Quand cette image est réduite (sur mobile) le rayon de courbure est donc lui aussi réduit. Si je met ce même rayon de courbure de 10px sur les autres images qui n'ont pas de coin arrondis, cet arrondi est excessif sur mobile. En gros je pense qu'il faut que ce rayon diminue quand l'image est downscallée. -- Fra
Pierre Maurette <maurette.pierre@free.fr> wrote:
Je suppose qu'un des problèmes (avec %) est que le "rayon" est en x et
en y proportionnel à resp la largeur et la hauteur de l'image. Vous
voudriez qu'il soit "absolu" (genre en px ou en em) mais proportionnel
à la largeur de l'image, ou à sa diagonale, c'est pareil en définitive.
En fait j'ai déjà une des images qui a ses coins arrondis d'origine (sur
20px, dont 10px de rayon). Quand cette image est réduite (sur mobile) le
rayon de courbure est donc lui aussi réduit. Si je met ce même rayon de
courbure de 10px sur les autres images qui n'ont pas de coin arrondis,
cet arrondi est excessif sur mobile.
En gros je pense qu'il faut que ce rayon diminue quand l'image est
downscallée.
--
Fra
Je suppose qu'un des problèmes (avec %) est que le "rayon" est en x et en y proportionnel à resp la largeur et la hauteur de l'image. Vous voudriez qu'il soit "absolu" (genre en px ou en em) mais proportionnel à la largeur de l'image, ou à sa diagonale, c'est pareil en définitive.
En fait j'ai déjà une des images qui a ses coins arrondis d'origine (sur 20px, dont 10px de rayon). Quand cette image est réduite (sur mobile) le rayon de courbure est donc lui aussi réduit. Si je met ce même rayon de courbure de 10px sur les autres images qui n'ont pas de coin arrondis, cet arrondi est excessif sur mobile. En gros je pense qu'il faut que ce rayon diminue quand l'image est downscallée. -- Fra
SAM
Le 11/05/15 19:04, Fra a écrit :
En fait j'ai déjà une des images qui a ses coins arrondis d'origine (sur 20px, dont 10px de rayon). Quand cette image est réduite (sur mobile) le rayon de courbure est donc lui aussi réduit. Si je met ce même rayon de courbure de 10px sur les autres images qui n'ont pas de coin arrondis, cet arrondi est excessif sur mobile.
Je suis étonné que les mobiles qui réduisent la taille de l'image ne réduisent pas aussi le rayon de courbure des coins même si rognés par CSS ... ?!
En gros je pense qu'il faut que ce rayon diminue quand l'image est downscallée.
donc tu as une FdS pour mobile et qui prévoit un border-radius moindre, non ?
tu as essayé avec border-radius: 0.5%; ?? par exemple.
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Le 11/05/15 19:04, Fra a écrit :
En fait j'ai déjà une des images qui a ses coins arrondis d'origine (sur
20px, dont 10px de rayon). Quand cette image est réduite (sur mobile) le
rayon de courbure est donc lui aussi réduit. Si je met ce même rayon de
courbure de 10px sur les autres images qui n'ont pas de coin arrondis,
cet arrondi est excessif sur mobile.
Je suis étonné que les mobiles qui réduisent la taille de l'image ne
réduisent pas aussi le rayon de courbure des coins même si rognés par
CSS ... ?!
En gros je pense qu'il faut que ce rayon diminue quand l'image est
downscallée.
donc tu as une FdS pour mobile et qui prévoit un border-radius moindre,
non ?
tu as essayé avec
border-radius: 0.5%;
??
par exemple.
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
En fait j'ai déjà une des images qui a ses coins arrondis d'origine (sur 20px, dont 10px de rayon). Quand cette image est réduite (sur mobile) le rayon de courbure est donc lui aussi réduit. Si je met ce même rayon de courbure de 10px sur les autres images qui n'ont pas de coin arrondis, cet arrondi est excessif sur mobile.
Je suis étonné que les mobiles qui réduisent la taille de l'image ne réduisent pas aussi le rayon de courbure des coins même si rognés par CSS ... ?!
En gros je pense qu'il faut que ce rayon diminue quand l'image est downscallée.
donc tu as une FdS pour mobile et qui prévoit un border-radius moindre, non ?
tu as essayé avec border-radius: 0.5%; ?? par exemple.
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Pierre Maurette
SAM : [...]
tu as essayé avec border-radius: 0.5%; ?? par exemple.
En %, sur un rectangle (non carré), les coins sont des quarts d'ellipse, ce qui est particulièrement moche (en 2015).
-- Pierre Maurette
SAM :
[...]
tu as essayé avec
border-radius: 0.5%;
??
par exemple.
En %, sur un rectangle (non carré), les coins sont des quarts
d'ellipse, ce qui est particulièrement moche (en 2015).
