border-radius en fonction de la taille d'écran

Le
fra-PasDeSp
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 % ?

Merci d'avance.
--
Fra
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier Miakinen
Le #26352162
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 ?
Pierre Maurette
Le #26352182
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-PasDeSp
Le #26352313
Pierre Maurette
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
Le #26352314
Olivier Miakinen
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
fra-PasDeSp
Le #26352316
Pierre Maurette
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 #26352432
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
Pierre Maurette
Le #26352442
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
Le #26352454
Le 12/05/15 12:08, Pierre Maurette a écrit :
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).



Je pense que ça a dû être moche dès leur apparition à ces ellipses !


Bon ... alors ...
border-radius: 4% / 6%;
???


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
fra-PasDeSp
Le #26352582
SAM
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 ... ?!



Ca semble être le cas pourtant.

> 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 ?



J'ai fait des essais avec vw et ce n'est pas satisfaisant.

Comme ce n'est que sur mobile que l'arrondi est choquant je vais, après
essais, opter effectivement pour ta suggestion avec :

------
.arrondi { border-radius: 18px; }

@media screen and (max-device-width:767px){

.arrondi { border-radius: 10px; }
}
------

tu as essayé avec
border-radius: 0.5%;



Le % s'applique aux dimensions de l'image et non au viewport, du coup si
l'image n'est pas carrée c'est trop moche.
--
Fra
Publicité
Poster une réponse
Anonyme