-->
Como redondear una imagen en HTML con CSS

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.


Códigos HTML 100% Optimizados

Suscríbete y recibe directamente en tu email, los mejores códigos HTML que necesitas para editar tu página web.








He leído y estoy de acuerdo con la Política de Privacidad


Redondear imagen css

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 -->


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.

Derechos: Fuente e Imagen



Publicado por: Vicente Espinoza

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!

Programa Mentoría 1&1 Únete Ya!

Comentarios: