Si alguien me puede ayudar tengo una pagina.html con una imagen dentro de un div
el div es class="avatar"
.
En el css tengo
.avatar {
width: 100%;
margin: 13%;
width: 65px;
border-radius: 50px 50% 50% 50%;
height: 65px;
background: #448ed3 ;
position: relative;
bottom: 50px;
}
.avatar img {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 30%;
border:2px solid #fff;
display: block;
}
Esto me da como resultado que la imagen quede en un circulo, pero el problema es que la imagen se me corta en la parte de abajo. En otras palabras no muestra la imagen entera en la parte de abajo.
¿Cómo puedo hacer para que me muestre la imagen entera o poder mover hacia arriba un poco la imagen dentro del circulo?
PD: el tamaño de la imagen es anchura: 687px altura: 798 px