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.
Redondear imagen css
Este fragmento de código en CSS nos facilita el trabajo de redondear una imagen en HTML de forma simple, ya 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 -->Imagen circular html
como redondear una imagen en html: Con este código lograras redondear imagen html y se visualiza la imagen ya 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.