.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;
}<div class="circle_border">
<img src="doctor.png" class="images1 zoomIn" alt="Save icon"/>
<p class="Text">
Doctor</p>
</div>I'm trying to place the image below inside a circle with a width of 125px, but the image is being cropped. How can I ensure that the entire image fits inside the circle? You can view the image here.
I've defined a class called circle_border to create the circle and an image class to adjust the height and width of the image.
.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;
}