28172 sujets

CSS et mise en forme, CSS3

[Résolu] Arrondir une image rectangulaire parfaitement

Bonjour à tous,

Comme le titre l'indique, j'aimerais mettre un border radius 50% sur une image qui est rectangulaire de base.
Malheureusement je n'ai pas le choix et je ne peux pas les avoir en carré.

Voici le CSS appliqué : 

.image-cropper {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}


Pour le moment j'ai effectué plusieurs tests comme ici :jsFiddle
Mais je me retrouve avec une partie de l'image non rempli dans la div parent.

Quelqu'un aurait une solution pour que ça marche avec un rendu le plus propre possible ?

Bien à vous,
Modifié par artsx (02 Nov 2015 - 15:47)
Bonjour Artsx,

Pourquoi mettre l'image dans un div ? Si tu appliques l'arrondi directement sur l'image en fixant la taille de celle-ci l'arrondi devrait être efficace.

Soit:
<img src="http://62.210.94.50/img/profile/5549cb3148722.jpg" width:"100" height:"100"/>
et
IMG {BORDER-RADIUS:50%;}
Bonjour Greg,

Car je veux que le rendu soit réellement arrondi.

Comme tu conseils de le faire, l'image ne sera pas réellement arrondi car tu vas la forcer de faire une hauteur qui n'est pas d'origine du coups on va perdre l'homothétie de l'image exemple sur le jsFiddle que j'ai mis à jour avec ton exemple :
http://jsfiddle.net/13u5z2mg/270/

Tu remarqueras que l'image est plus en forme de ballon de rugby que de foot.. Smiley lol
Modifié par artsx (02 Nov 2015 - 14:50)
Effectivement, tu as raisons.

Par contre je te propose de modifier comme suit:

.image-cropper {
overflow:hidden;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
img { width: 100px;
    height: 100px;
    margin:auto;
}

Qu'en penses-tu ?
la partie non rempli c'est normal.... enleve ton css, tu verra que ton image de base n'est pas "fini" comme sur ta photo de profil. rien me choque.
Modifié par JENCAL (02 Nov 2015 - 15:07)
Administrateur
Bonjour,

tu veux faire un disque / cercle à partir d'un rectangle, pouvant être au format portrait ou paysage ?
Mmh avec une image de fond il y aurait background-size: cover

EDIT : un truc me choque, ce sont les préfixes pour border-radius : http://caniuse.com/#feat=border-radius
Autoprefixer FTW
Modifié par Felipe (02 Nov 2015 - 15:11)
Administrateur
JENCAL a écrit :
la partie non rempli c'est normal.... enleve ton css, tu verra que ton image de base n'est pas "fini" comme sur ta photo de profil. rien me choque.

Il y a du rouge http://jsfiddle.net/13u5z2mg/272/ parce que la photo est plus haute que large, non ? Ou parles-tu d'autre chose ?
Oui c'est ce que j'indique en effet.

Si l'image était carré, un border radius 50% et c'était réglé.

Mais la mon soucis c'est que les images sont en format 160/190 d'ou le manque à droite de l'image car elle n'est pas assez large.

Je me demandais s'il y avait une astuce CSS pour combler se manque pour garder au maximum les bonnes proportions de l'image sans la ****

PS : les prefixes je les ai fais à la va vite, j'utilise LESS/ SASS pour tout ça.. Smiley lol
Modifié par artsx (02 Nov 2015 - 15:15)
Tu ne pourra pas avoir quelque chose de parfaitement "rond", même si tu met un padding à ta div cela décale le problème de l'autre coté. soit tu adopte le ballons de rugby Smiley langue (bien qu'on est pas gagner la coupe!) soit tu re-travail ton image.
C'est bien ça mon soucis, malheureusement je n'aurais pas d'image carré.

J'ai bien une solution en mettant un height à 118%/119% ça me corrige bien le soucis mais je ne trouve pas ça franchement adapté. C'est un peu olé olé comme astuce mais pour le moment ça fonctionne.

J'aurais préféré quelque chose qui se rapproche le plus de la réalité mais à mon avis c'est cuit.

Le ballon de rugby n'est pas..... très esthétique... Smiley lol
Merci pour l'astuce, je ne connaissais pas.

IE nous fais toujours des siennes !

Je vais l'utiliser pour les navigateurs "modernes", je mettrais un hack pour les IE !
Raphael a écrit :

ça fonctionne si le div parent est carré... sinon, object-fit vient à la rescousse Smiley cligne


ok ok merci.
Bonjour,

J'utilise GIMP2.

J'ai réussi à avoir une image ce qui ressemble à une image ronde, mais en réalité c'est un fond carré blanc... Résultat, les 4 "triangles" des coins sont en blanc.

Merci et a+
Sujet clos
Aller à