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.
0 Comentarios