Immagine circolare reattiva

Question

Attualmente sto lavorando alla creazione di un foglio di stile dinamico che userò in futuro, quindi desidero che sia dinamico e non codificato.

Ho un classe di immagine:

.image-round{ 
    border-radius: 50%; 
} 

Questa classe funziona bene per tutte le immagini quadrati, ma quando provo immagini rettangolari, ottengo un ovale.

Ho cercato di aggirare questo usando jQuery, avvolgendo l'immagine in un contenitore, che ho fatto nascondere l'overflow e impostarne l'altezza e la larghezza per essere uguale all'altezza dell'immagine. Questo ha risolto il problema, ma ora mi trovo di fronte a problemi di risposta.

Quando tento di ridimensionare la finestra, l'immagine si schiaccia.

Ora mi chiedo se esiste una soluzione per risolvere questo problema interamente dinamicamente, senza codificare ciò che mai, rendere le immagini in orizzontale così come il ritratto rotondo.

Voglio davvero evitare di dover controllare le dimensioni delle immagini al ridimensionamento delle finestre, e quindi riaggiustare le dimensioni dei contenitori - poiché sono abbastanza sicuro che questo richiederà molte prestazioni.

Non è inoltre un'opzione per utilizzare l'immagine di sfondo.

Answer 1

È possibile realizzare tutte le immagini rotonda avvolgendo le immagini in un div e

• mantenere il suo formato per essere quadrato (per diverse tecniche per mantenere il rapporto di aspetto di un div see here)
• applica il raggio del bordo e overflow:hidden; sul wrapper.

Ciò impedirà la visualizzazione delle immagini ovali.

Quindi il problema è la gestione di ogni rapporto di aspetto dell'immagine, orizzontale e verticale in modo che siano centrati e "coprire" il contenitore. Per questo è possibile utilizzare il object-fill property in questo modo:

div{ 
 
    position:relative; 
 
    width:20%; 
 
    padding-bottom:20%; 
 
    border-radius:50%; 
 
    overflow:hidden; 
 
} 
 
img{ 
 
    position:absolute; 
 
    object-fit: cover; 
 
    width:100%;height:100%; 
 
}

<div><img src="http://i.imgur.com/uuEyxxE.jpg" /></div> 
 
<div><img src="http://i.imgur.com/HDssntn.jpg" /></div>

Lo svantaggio è che IE doesn't support object-fill. Quindi è necessario un ripiego per gestire due casi:

• immagini di paesaggio limitano la dimensione di immagine da un'altezza
• immagini ritratto limitano la dimensione di immagine da larghezza

div{ 
 
    position:relative; 
 
    width:20%; 
 
    padding-bottom:20%; 
 
    border-radius:50%; 
 
    overflow:hidden; 
 
} 
 
img{ 
 
    position:absolute; 
 
    margin:auto; 
 
} 
 
.landscape img{ 
 
    height:100%; 
 
    left:-100%; right:-100%; 
 
} 
 
.portrait img{ 
 
    width:100%; 
 
    top:-100%; bottom:-100%; 
 
}

<div class="landscape"><img src="http://i.imgur.com/uuEyxxE.jpg" /></div> 
 
<div class="portrait"><img src="http://i.imgur.com/HDssntn.jpg" /></div>

In questa configurazione, è necessario JS per identificare le immagini orizzontali o verticali e adattarle di conseguenza.