Image is different size to the others? - html

Question

I have this issue where the second image is slightly smaller then it's counter parts, even though all the attributes (as far as I can tell) are exactly the same?
http://staging-triteamglos.transitiongraphics.co.uk/
Members sections, three circular images, the middle one isa different size?
/*--- Member Benifits
--------------------------------------------*/
.header-white {
text-align: center;
color: #fff;
}
.par-white {
text-align: center;
}
p.upper {
text-transform: uppercase;
font-weight: 800;
}
.mymember1 {
text-align: center;
float: left;
width: 33.3%;
box-sizing: border-box;
padding-right: 15px;
}
.mymember1 img,
.mymember2 img,
.mymember3 img {
border-radius: 50%;
width: 50%;
}
.mymember2 {
text-align: center;
float: left;
width: 33.3%;
box-sizing: border-box;
padding-left: 15px;
padding-right: 15px;
}
.mymember3 {
text-align: center;
float: right;
width: 33.3%;
box-sizing: border-box;
padding-left: 15px;
margin-bottom: 0!important;
}
.member {
margin: 15px auto!important;
}
<h1 class="header-white">Member Benefits</h1>
<p class="par-white">Thinking of joining TTG? Have a look at some of the member benefits below</p>
<div class="mymember1">
<p>
<a href="/membership/">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/member-swimmer.jpg" height="185">
</a>
</p>
<p class="upper">Advice from experienced triathletes</p>
<p class="my_content">Our club benefits from a membership of very experience triathletes who have competed across all variations of the sport and they are more then to share their experiences.</p>
</div>
<div class="mymember2">
<p>
<a href="/membership/">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/member-cyclist.jpg" height="185">
</a>
</p>
<p class="upper">Opportunity to train with others</p>
<p class="my_content">Motivation is key in training, training with others will help you achieve your goals what ever they are.</p>
</div>
<div class="mymember3">
<p>
<a href="/membership/">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/member-runner.jpg" height="185">
</a>
</p>
<p class="upper">Comradeship from a big team</p>
<p class="my_content">We all want to achieve our personally goals, however when your surrounded by friends with the same mindset, the goals soon become secondary.</p>
</div>
<div class="clear"></div>
<div class="container member">
<a class="btn" href="#">FIND OUT MORE</a>
</div>

Answer 1

.mymember1 img, .mymember2 img, .mymember3 img {
border-radius: 50%;
width: 250px;
height: 250px;
max-width: 100%;
}

Answer 2

Actually you were using padding from both sides in mymember2 class. That's why its creating the problem. Also the above code fine and define the width and
height for all the images.

Answer 3

It is because your second image size is 180x180 while the other two were 187x187. they wont have the same size because your using border radius 50% on all of them.
To solve. its either u set a same sizes for the images or fixed ur 2nd image size to 187x187, or the 1st and 3rd img to 180x180 to make them all the same.

Answer 4

The reason why the 2nd image is smaller is because in its parent div, mymember2 was given an extra 15px padding.
I suggest you change all padding css for your .mymember# classes to margins and decrease their width to fit the page.
also, I would suggest putting all common css in 1 class called memember
.mymember {
text-align: center;
float: left;
width: 31%;
box-sizing: border-box;
margin: 0 15px;
}
And for every specific css give it to the corresponding div