Modify image position with css

Question

Modify image position with css

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

If someone can help me I have a page.html with an image inside a div the div is class="avatar" . In the css I have

.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;
}

This gives me the result that the image is in a circle, but the problem is that the image is cut in the bottom. In other words it does not show the whole image at the bottom.

How can I make it so that it shows me the whole image or can move the image up a bit inside the circle?

PS: the size of the image is Width: 687px Height: 798 px

html css

asked by Adolfo Comas 10.10.2017 в 18:01

source

2 answers

Touring Angular object 2 paging information when do I run ./manage.py and makemigration? Mark error ImportError: No module adopcion.models

score 0 · Answer 1

If the image size is always fixed, add attributes top and left in your .avatar img with negative values

EDITO

I add example:

.avatar img {
    position: relative;
    top: -15px; /* ajustar los valores para mover la imagen */
    left: -5px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 30%;
    border:2px solid #fff;
    display: block;
}

score 0 · Answer 2

Try to do it that way, I'll correct some things, although it would be better to put the background image, you would have more control and easier:

.avatar {
margin: 13%;
width: 65px;
border-radius:  50%;
height: 65px;
background: #448ed3 ;
position: relative;
border:2px solid #fff;
bottom: 50px;
overflow:hidden;
}
.avatar img {
width: 100%;
height: auto;
display: block;
}