web-dev-qa-db-fra.com

Créez un avatar de cercle à partir d'une image rectangulaire en gardant des proportions et en utilisant simplement le centre de l'image

J'ai des images de 480 pixels de large par 640 pixels de haut.

Je veux les afficher sous forme de cercles sur une page Web de 150 pixels de large en utilisant CSS. Mais je veux voir le centre de l'image.

Donc, prenez 80px du haut et du bas de l'image d'origine pour produire le carré avec l'image que je veux voir. Je veux ensuite en faire un cercle.

Tout ce que j'essaye étire l'image car la plupart des exemples consistent à utiliser une image carrée pour commencer.

Quelqu'un peut-il aider

htmlcssimageavatar
22
user3086854

Vous pouvez définir l'image comme arrière-plan d'un élément, définir sa taille d'arrière-plan sur cover, puis utiliser border-radius pour arrondir les bords.

#avatar {
    /* This image is 687 wide by 1024 tall, similar to your aspect ratio */
    background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
    
    /* make a square container */
    width: 150px;
    height: 150px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: top center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}
<div id="avatar"></div>
54
meagar

Une autre solution consiste à définir les tailles pour img et à utiliser "object-fit: cover;". Il fera la même chose que "background-size: cover" sans jouer avec les images d'arrière-plan.

img {
  object-fit: cover;
  border-radius:50%;
  width: 150px;
  height: 150px;
}
<img src="http://i.stack.imgur.com/Dj7eP.jpg" />

Je l'ai trouvé sur le post de Chris Nager. - 1

Edit: Comme @prograhammer l'a mentionné, cela ne fonctionne pas sur IE. Edge ne le prend en charge que sur <img> Mots clés.

La prise en charge partielle dans Edge fait référence à object-fit ne supporte que <img> - 2

Edit 2: This post de Primož Cigler montre comment utiliser Modernizr pour ajouter un support de secours pour IE mais dans ce cas, vous devra ajouter un wrapper à l'image.

23
Brosig

Si l'image doit être au format HTML plutôt qu'une image d'arrière-plan

.wrapper {
  width:150px;
  height:150px;
  margin: 25px auto;
  overflow: hidden;
  border-radius:50%;
  position: relative;
}

.wrapper img {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%)
}
<div class="wrapper">
  <img src="http://lorempixel.com/output/business-q-c-640-480-4.jpg" alt="" />
</div>
19
Paulie_D

Une autre solution est la classe css simple pour l'élément img:

.avatar {

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
}

Usage:

<img class="avatar" src="http://path.to/image.jpg" />
1
Jacek Gralak