Creare un avatar circolare da un'immagine rettangolare mantenendo le proporzioni e utilizzando solo il centro dell'immagine

Question

Ho immagini con larghezza 480 px di altezza 640 px.

Voglio visualizzarli come cerchi su una pagina web larga 150 px utilizzando CSS. Ma voglio vedere il centro dell'immagine.

Quindi prendere 80 px della parte superiore e inferiore dell'immagine originale produce il quadrato con l'immagine che voglio vedere. Allora voglio farlo in un cerchio.

Tutto ciò che provo allunga l'immagine poiché la maggior parte degli esempi utilizza un'immagine quadrata con cui iniziare.

Può uno aiuto

Answer 1

È possibile impostare l'immagine come sfondo di un elemento, impostare il suo background-size a cover, e quindi utilizzare border-radius per arrotondare i bordi.

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

Answer 2

Se l'immagine è richiesto di essere in un'immagine di sfondo HTML piuttosto che

.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/image_output/nightlife-q-c-640-480-3.jpg" alt="" /> 
 
</div>

Answer 3

Un'altra soluzione è semplice classe CSS per l'elemento 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); 
} 

utilizzati:

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

Answer 4

Un'altra soluzione è quella di impostare le dimensioni per img Utilizzando "oggetto-fit: coperchio;". Farà lo stesso di "background-size: cover" senza intaccare le immagini di sfondo.

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

L'ho trovato su Chris Nager palo. - 1

Modifica: Come @prograhammer ha menzionato, questo non funziona su IE. Edge lo supporta solo sui tag <img>.

Supporto parziale Edge si riferisce a object-fit solo sostenere <img> - 2

Edit 2: This carica di Primož Cigler mostra come utilizzare Modernizr per aggiungere un supporto fallback per IE, ma, in questo caso , dovrai aggiungere un wrapper all'immagine.

Answer 5

#avatar { 
 
    /* This image is 687 wide by 1024 tall, similar to your aspect ratio */ 
 
    background-image: url('http://imgur.com/a/eoiBH'); 
 
    
 
    /* 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: center; 
 

 
    /* round the edges to a circle with border radius 1/2 container size */ 
 
    border-radius: 50%; 
 
}

<div id="avatar"></div>