Ejemplo para hacer una imagen circular en CSS

Crear una imagen circular en CSS es una de las tareas más simples pero efectivas para hacer que las imágenes se vean más atractivas. Este efecto es especialmente útil para avatares o fotos de perfil en sitios web. Aquí te muestro cómo hacerlo en solo unos pocos pasos.

Paso 1: Configura el HTML

Primero, necesitamos una imagen a la que le daremos forma circular. En este ejemplo, usaremos una estructura HTML simple:

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imagen Circular en CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="imagen-circular">
        <img src="avatar.jpg" alt="Foto de Perfil">
    </div>
</body>
</html>

En este código, estamos colocando nuestra imagen dentro de un contenedor div con la clase imagen-circular. La imagen se muestra usando una etiqueta <img>.

Paso 2: Agrega Estilos en CSS

Para hacer que la imagen sea circular, aplicaremos algunos estilos en CSS:

css
/* Estilos para la imagen circular */
.imagen-circular img {
    width: 150px; /* Ajusta el tamaño según tus necesidades */
    height: 150px; /* Asegúrate de que el ancho y alto sean iguales */
    border-radius: 50%; /* Esto hace que la imagen se vea circular */
    object-fit: cover; /* Asegura que la imagen se recorte si es necesario */
    border: 2px solid #ddd; /* Opcional: Agrega un borde alrededor */
}

Explicación de los estilos

width y height: Definimos el tamaño de la imagen. Para que el círculo se vea perfecto, el ancho y el alto deben ser iguales.
border-radius: 50%;: Este es el truco para hacer la imagen circular. Al establecer el border-radius al 50%, las esquinas de la imagen se redondean completamente hasta formar un círculo.
object-fit: cover;: Este ajuste es útil si la imagen original no es cuadrada, ya que recorta y ajusta la imagen dentro del contenedor circular.
border (opcional): Puedes agregar un borde para darle un toque de estilo extra. Aquí usamos un borde gris claro de 2 píxeles.

Resultado Final

Con estos simples pasos, la imagen debería verse perfectamente circular en tu navegador. Este es un resultado típico de cómo debería verse el contenedor con la imagen circular:

html
<div class="imagen-circular">
    <img src="avatar.jpg" alt="Foto de Perfil">
</div>

Ejemplo Completo de CSS y HTML

Aquí está el código completo para que lo pruebes:

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imagen Circular en CSS</title>
    <style>
        .imagen-circular img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="imagen-circular">
        <img src="avatar.jpg" alt="Foto de Perfil">
    </div>
</body>
</html>

Consideraciones Finales

Ajusta el tamaño de la imagen: Dependiendo del diseño de tu sitio, quizás quieras que la imagen sea más pequeña o más grande. Simplemente ajusta los valores de width y height en la clase CSS.
Optimización para otros dispositivos: Si deseas que la imagen cambie de tamaño en dispositivos más pequeños, considera usar media queries para hacerla responsiva.

Programación y Ejemplos

Buscar este blog