miércoles, 15 de febrero de 2017

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

Hoy voy cambiar un poco, últimamente he estado publicando videotutoriales y he dejado de lado los manuales escritos, por eso el día de hoy vamos a tratar el tema por medio de un post normal.

bien, cuando queremos usar imágenes redondas como en el caso de un Avatar sabemos que lo podemos lograr poniendole a la imagen la propiedad:
 border-radius:50%;

Esto funciona muy bien si la imagen que el usuario sube es totalmente cuadrada, pero sabemos que la mayoría de las veces no es así, etonces, ¿Cómo podemos solucionar que aunque la imagen sea rectangular el avatar sea un círculo perfecto?

Bueno, la solución consiste en aplicar la imagen como fondo de un contenedor que tenga tamaño cuadrado, y alcontenedor aplicarle el corder-radius.

Ejemplo:


Primero creamos un contenedor y le asignamos como fondo una imagen.
<div class="avatarRedondo" style="background-image:url(dirección de tu imagen)"></div>
Despues definimos la regla CSS para la clase avatarRedondo:


.avatarRedondo {
    /* Aquí establecemos el tamaño del avatar, puedes poner los valores que quieras */
    height: 50px;
    width: 50px;
    /* Éstos valores no los tienes que cambiar ya que son en base a proporción */
    background-repeat: no-repeat; /*Para que la imagen no se repita */
    background-position: 50%; /*Centrar la imagen en el contenedor*/
    border-radius: 50%; /*Hace el efecto de redondear el contenedor*/
    background-size: 100% auto; /*Hace que la imagen ocupe todo el contenedor*/
}
Como puedes ver es muy sencillo hacerlo, bueno, eso es todo por ahora y nos leemos luego!!!

No hay comentarios:

Publicar un comentario