¿Cómo crear una imagen redonda con CSS?

 Para crear una imagen redonda con CSS, puedes utilizar la propiedad border-radius. Aquí te dejo un ejemplo sencillo:

HTML:

<img src="ruta/a/tu/imagen.jpg" alt="Descripción de la imagen" class="imagen-redonda">

CSS:

.imagen-redonda {

    width: 200px; /* Ajusta el tamaño según tus necesidades */

    height: 200px; /* Debe ser igual al ancho para mantener la proporción circular */

    border-radius: 50%; /* Hace que las esquinas sean redondeadas hasta formar un círculo */

    object-fit: cover; /* Asegura que la imagen se ajuste bien dentro del contenedor circular */

}

Explicación:

width y height: Establecen el tamaño de la imagen. Para que la imagen sea circular, deben ser iguales.

border-radius: 50%; Hace que las esquinas de la imagen sean completamente redondeadas, creando un círculo perfecto.

object-fit: cover; (opcional) Se usa para asegurar que la imagen cubra todo el área del contenedor circular sin distorsionarse.

Este es un método efectivo y simple para hacer que cualquier imagen tenga una apariencia redonda utilizando solo CSS.



Publicar un comentario

0 Comentarios