La presentación correcta de imágenes en un sitio web es fundamental para mejorar la experiencia del usuario y la estética de la página. Uno de los estilos más populares para mostrar imágenes es la forma circular. En este artículo, aprenderás a crear imágenes circulares utilizando solo HTML y CSS, optimizando así tu diseño web.
Antes de comenzar a implementar imágenes circulares, es importante tener en cuenta algunos conceptos básicos sobre HTML y CSS. Asegúrate de tener un entendimiento fundamental de:
Comenzamos creando la estructura básica de un documento HTML. Asegúrate de incluir las etiquetas necesarias para que el código se interprete correctamente.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Imágenes Circulares</title> </head> <body> <div class="imagen-circular"> <img src="ruta-de-tu-imagen.jpg" alt="Descripción de la imagen"> </div> </body> </html>
Una vez que tengas tu estructura HTML, es momento de agregar los estilos en CSS. Puedes crear un archivo llamado styles.css y añadir lo siguiente:
.imagen-circular { width: 150px; /* Ancho del contenedor */ height: 150px; /* Alto del contenedor */ overflow: hidden; /* Ocultar el desbordamiento */ border-radius: 50%; /* Bordes redondeados para crear la forma circular */ display: flex; /* Facilitar la alineación de la imagen */ justify-content: center; /* Centra la imagen horizontalmente */ align-items: center; /* Centra la imagen verticalmente */ } .imagen-circular img { width: 100%; /* Hacer que la imagen ocupe todo el contenedor */ height: auto; /* Mantener proporciones de la imagen */ }
Al juntar el HTML y el CSS que hemos creado, tu código completo debería verse así:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Imágenes Circulares</title> <style> .imagen-circular { width: 150px; height: 150px; overflow: hidden; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .imagen-circular img { width: 100%; height: auto; } </style> </head> <body> <div class="imagen-circular"> <img src="ruta-de-tu-imagen.jpg" alt="Descripción de la imagen"> </div> </body> </html>
Para asegurarte de que la imagen circular se vea bien en diferentes dispositivos, puedes usar unidades relativas como vw (viewport width) o vh (viewport height), o usar media queries para ajustar el tamaño del contenedor según el tamaño de pantalla del dispositivo.
Es importante incluir un atributo alt en la etiqueta <img> para garantizar que la imagen sea accesible a personas con discapacidades visuales. Asegúrate de que el texto alternativo sea descriptivo y relevante para el contenido de la imagen.
Crear imágenes circulares con HTML y CSS es un proceso sencillo que añade un toque moderno y atractivo a tu diseño web. Siguiendo los pasos anteriores, podrás implementar esta técnica en cualquier proyecto. No dudes en experimentar con tamaños, margenes y otras propiedades CSS para personalizar tus imágenes según tus necesidades. ¡Empieza a aplicar lo que has aprendido y mejora la presentación visual de tu sitio web!
Con estos recursos, podrás profundizar aún más en el uso de HTML y CSS para crear diseños responsivos y accesibles.
Page loaded in 27.50 ms