[HTML + CSS] Proporcjonalny avatar

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.

nie da się.

możesz to zrobić tylko gubiąc proporcje:
http://jsbin.com/kekufegi/1/

albo bez przeskalowania (nie chce mi się pisać przykładu, ale position: absolute itd.).

efekt z przeskalowaniem mógłbyś osiągnąć, jeżeli kontener jest kwadratowy (tj. może mieć border-radius, ale taką samą wys/szer musi mieć) a od serwera wiedziałbyś czy obrazek jest szerszy czy wyższy (czyli nadać jakąś klasę temu IMG)