Como redondear una imagen en HTML con CSS

Circular Images con CSS

Hay ocasiones que se hace tan necesario colocar en nuestro sitio una foto para perfil en forma circular, editamos la que queremos en Photoshop u otro editor de imagen conocido, pero al momento de adaptarla a la plantilla en HTML se complica un poco en tamaño como en ubicación.

Mejora tu sitio web y obtén más clientes

Suscríbete y conoce las características que tu sitio web necesita para convertirse en un imán de potenciales clientes
  • Multiplica tus ingresos aprovechando al máximo tu sitio web.
  • Comienza a generar tráfico cualificado y de interés para tu oferta.
  • Convierte tus visitas en clientes gracias a una web optimizada.

Tus datos están 100% seguros.
Este fragmento de código en CSS nos facilita el trabajo de redondear una imagen en HTML de forma simpleya que con solo implementarlo en nuestro sitio funciona de maravillas.


<!-- Codigo CSS imagen circular -->
div.avatar {
/* cambia estos dos valores para definir el tamaño de tu círculo */
height: 100px;
width: 100px;
/* los siguientes valores son independientes del tamaño del círculo */
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
background-size: 100% auto;
}
<!-- Fin Codigo CSS imagen circular -->


Con este codigo en HTML se visualiza la imagen en el sitio:


<!-- Codigo HTML imagen circular -->
<div class="avatar" style="background-image: url(COLOCAR-URL-DE-IMAGEN)"></div>}
<!-- Fin Codigo HTML imagen circular -->


El primer código css lo colocas en la hoja de estilo y el segundo código html en donde quieres que salga la imagen, no olvides cambiar lo que esta escrito con rojo.

Derechos: Fuente e Imagen
¿TE PARECE COMPLICADO TODO ESTO? LO HAGO PARA TI

Puedo hacerlo yo para ti, porque no tienes tiempo ni ganas: ¡Contrátame Aquí!
O puedo explicarte como crear un sitio web completamente dinámico sin ser un experto en programación web.¡Suscríbete Ahora!

Siguiente
« Anterior Post