将整个图像拟合成圆圈

Question

＆＃13;

＆＃13;

.circle_border {
    width: 125px;
    height: 125px;
    position: relative;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.Text{
font-size: 18px;
padding: 10px 0px 0px; 
line-height:normal;
}


.images1 {
    display: inline;
    margin: 0 auto;
    height: 125px;
    width: auto;
    border: 4px solid #FFF;
    border-radius: 62.5px;
}

.circle_border:hover .images1 {
   background: transparent;
	border: 4px solid #67508F;
	cursor: pointer;
	color: transparent !important;
	
		margin-top:4px;

	/*{Shadow}*/
	box-shadow:inset 0 0 5px 0 #333;
	-moz-box-shadow:inset 0 0 5px 0 #333;
	-webkit-box-shadow:inset 0 1px 2px 0 #333, 0 1px 1px 0 #fff;
} 

.circle_border:hover .Text {
	cursor: pointer;
	color:#67508F !important;
}

＆＃13;

<div class="circle_border">
<img src="doctor.png" class="images1 zoomIn" alt="Save icon"/>
<p class="Text">
Doctor</p>
</div>

＆＃13;

＆＃13;

＆＃13;

我想将此图片放在宽度为125像素的圆圈中。但是我的形象正在萎缩。我应该如何在我的圈子中获得整个图像。这是我的图片

我创建了一个类circle_border来创建用于调整图像高度和宽度的圆和图像类。

.circle_border {
    width: 125px;
    height: 125px;
    position: relative;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.images1 {
    display: inline;
    margin: 0 auto;
    height: 125px;
    width: auto;
    border: 4px solid #FFF;
    border-radius: 62.5px;
}

Answer 1

你可以这样做

＆＃13;

＆＃13;

div {width: 125px;
    height: 125px;
    border: 1px solid;
    border-radius: 50%;
    position: relative;
    background: #ccc;}

img{width: 65%;
    position: absolute;
    top: 10px;
    left: 22px;}

＆＃13;

<div>
  <img src="http://i.stack.imgur.com/6snp2.png">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这样做，

.circle_border img{
   display: block;
   max-width: 100%;
   height: auto;
   border-radius:50%;
}

Answer 3

您应该将border，border-radius和尺寸设置为图片包装器。图像本身应该只占100％宽度。通过这种方式，您可以通过包装器控制块样式。

请参阅jsfiddle