Image resizing

Hey,

I have searched and read almost all the related topic.I have a problem when resizing an image so it become circle.With the following code, it become responsive horizontally on the phone. Also,see the first right

.Imagestwo {
max-width: 500px;
height: 500px;
border-radius: 100%;
background-size: contain;
border: 1px solid white;

}

With the following code it is responsive on Phone, however I want the image to be bigger and circle as the first image. Also, see the second right

.x-img-circle {
border-radius: 100%;
}
.x-img {
margin-bottom:1.313em;
}
.img{
max-width: 100%;
height: auto;
border: 0;
vertical-align:middle;
}