Witam,
Chciałbym wyświetlić avatar w okręgu. Zależy mi, aby ów avatar wypełniał okręg, nawet jeśli miałby być częściowo niewidoczny. Widoczny musi być sam środek. Chciałbym również, aby wyświetlany avatar był proporcjonalny.
Rozwiązanie z background-image podaję poniżej:
.avatar {
background: #000 no-repeat;
background-position : 50% 50%;
background-size : 100%;
background-size: cover;
width : 60px;
height : 60px;
border-radius : 50%;
border: 5px solid #999;
}
<div class="avatar" style="background-image: url('img/eiffle.jpg')"></div>
PLik eiffle.jpg ma rozmiar 247x500 px. Został on rozszerzony (zwężony) na szerokość 60px i proporcjonalnie na wysokość.
Powyższa metoda działa poprawnie dla obrazka o odwrotnym rozmiarze, tj. np. 500x247 px.
Zależy mi na rozwiązaniu w CSS, bez js. Chciałbym, pozbyć się elementu DIV i zamiast niego wstawić znacznik IMG, czy ktoś zna rozwiązanie tego problemu ?
Pozdrawiam JD.