Cómo redondear con CSS imágenes cuadradas y rectangulares

Tengo creada una tienda on-line y quiero que la imagen del usuario se vea redonda por completo.

Tengo en CSS dado a la imagen un border-radius: 50%; y si la imagen cargada es un cuadrado perfecto hace el círculo perfecto. Pero si el usuario al registrarse sube una imagen rectangular, al aplicarse el border-radius la imagen se queda ovalada y no redonda.

¿Cómo puedo conseguir que, sea cual sea la imagen de usuario subida, se vea como un circulo perfecto?

¿Hay alguna forma de escalar la imagen y que esté contenida en un figure o un <div> que tenga la propiedad border-radius, o algo así?

Gracias de antemano.

Respuestas

Este problema es fácil de resolver si muestras la imagen como fondo de un elemento. Me explico: si tu código HTML original es algo así:

<img class="avatar" src="...">

Tienes que cambiarlo por algo así, para mostrar la imagen como fondo del elemento <div>:

<div class="avatar" style="background-image: url(...)"></div>

Y ahora ya sólo tienes que aplicar las siguientes reglas CSS para mostrar el <div> redondeado y con la imagen escalada manteniendo sus proporciones originales:

div.avatar {
    /* cambia estos dos valores para definir el tamaño de tu círculo */
    height: 100px;
    width: 100px;
    /* los siguientes valores son independientes del tamaño del círculo */
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    background-size: 100% auto;
}

@javiereguiluz

22 febrero 2015, 22:18

Muchas gracias!! Lo probaré en cuanto pueda.

@ucip3

23 febrero 2015, 18:10

@javiereguiluz muchísimas gracias.

Funciona a las mil maravillas, justo lo que yo quería.

Saludos!

@ucip3

25 febrero 2015, 18:58