web-dev-qa-db-fra.com

Comment faire apparaître une image rectangulaire circulaire avec CSS

J'ai utilisé border-radius: 50% ou border-radius: 999em, mais le problème est le même: avec les images au carré, pas de problème, mais avec les images rectangulaires, j'obtiens un cercle ovale. Je suis également disposé à recadrer une partie de l'image (évidemment). Y a-t-il un moyen de faire cela avec du CSS pur (ou au moins JavaScript/jQuery), sans utiliser un <div> avec un background-image, mais en utilisant uniquement la balise <img>?

htmlcsscss-shapes
64
Jennifer Vandoni

Je présume que votre problème avec background-image est qu'il serait inefficace avec une source pour chaque image dans une feuille de style. Ma suggestion est de définir la source en ligne:

<div style = 'background-image: url(image.gif)'></div>

div {
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

Fiddle

55
fzzle

Mes 2cents parce que les commentaires pour la seule réponse deviennent un peu fous. C'est ce que je fais normalement. Pour un cercle, vous devez commencer par un carré. Ce code force un carré et va étirer l'image. Si vous savez que l'image doit avoir au moins la largeur et la hauteur de la division ronde, vous pouvez supprimer les règles de style img pour qu'elle ne soit pas étirée, mais seulement coupée.

<html>
    <head>
        <style>
            .round {
                border-radius: 50%;
                overflow: hidden;
                width: 150px;
                height: 150px;
            }
            .round img {
                display: block;
            /* Stretch 
                  height: 100%;
                  width: 100%; */
            min-width: 100%;
            min-height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="round">
            <img src="image.jpg" />
        </div>
    </body>
</html>
38
David

Pour ceux qui utilisent Bootstrap 3, il dispose d'une excellente classe CSS pour faire le travail:

<img src="..." class="img-circle">
12
Aron Lorincz

vous pouvez seulement créer un cercle à partir d'un carré en utilisant border-radius.

border-radius n'augmente ni ne réduit les hauteurs ni les largeurs.

Votre demande est d'utiliser uniquement la balise image, il est fondamentalement impossible si la balise n'est pas un carré.

Si vous souhaitez utiliser une image vierge et en définir une autre en bg, ce sera douloureux, avec un arrière-plan pour chaque image à définir.

Le recadrage ne peut être effectué que si un wrapper existe pour le faire. dans ce cas, vous avez plusieurs façons de le faire

4
G-Cyr

En s'appuyant sur la réponse de @fzzle - pour obtenir un cercle à partir d'un rectangle sans définir de hauteur ni de largeur fixes, ce qui suit fonctionnera. Le padding-top: 100% conserve un ratio de 1: 1 pour le cercle diviseur. Définissez une image d'arrière-plan intégrée, centrez-la et utilisez background-size: cover pour masquer tout excès.

CSS

.circle-cropper {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  border-radius: 50%;
  width: 100%;
  padding-top: 100%;
}

HTML

<div class="circle-cropper" role="img" style="background-image:url(myrectangle.jpg);"></div>
3
paddyfields

Celui-ci fonctionne bien si vous connaissez la hauteur et la largeur:

img {
  object-fit: cover;
  border-radius: '50%';
  width: 100px;
  height: 100px;
}

via https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

2
user2634633

Vous pouvez le faire comme ça:

    <html>
<head>
    <style>
        .round {
            display:block;
            width: 55px;
            height: 55px;
            border-radius: 50%;
            overflow: hidden;
            padding:5px 4px;
        }
        .round img {
            width: 45px;
        }
    </style>
</head>
<body>
    <div class="round">
        <img src="image.jpg" />
    </div>
</body>
2
visualfeaster

La suite a fonctionné pour moi:

CSS

.round {
  border-radius: 50%;
  overflow: hidden;
  width: 30px;
  height: 30px;
  background: no-repeat 50%;
  object-fit: cover;
}
.round img {
   display: block;
   height: 100%;
   width: 100%;
}

HTML

<div class="round">
   <img src="test.png" />
</div>
1
Qasim

J'ai recherché ce même problème et je n'ai pas pu trouver de solution décente, si ce n'est que la div avec l'image en arrière-plan et la balise img à l'intérieur sans visibilité ou quelque chose du genre.

Une chose que je pourrais ajouter est que vous devriez ajouter un background-size: cover à la div, afin que votre image remplisse l’arrière-plan en coupant son excès.

0
Krynble