画像は他の画像とはサイズが異なりますか？

Question

私はすべての属性（私が言うことができる限り限り）はまったく同じですが、2番目の画像がわずかに小さく、それがカウンターパートであるというこの問題がありますか？

http://staging-triteamglos.transitiongraphics.co.uk/

メンバーのセクション、3枚の円形の画像、真ん中の1つのISA異なるサイズ？

/*--- 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

実はあなたはmymember2クラスの両側からのパディングを使用していました。そういうわけで、それが問題を作り出しているのです。また、上のコードは、すべての画像の幅と の高さを定義します。

Answer 3

他の2つは187x187あったが、2番目の画像サイズは180x180だからです。彼らはすべてあなたのボーダー半径50％を使用しているので、彼らは同じサイズを持っていない。

解決します。画像のサイズを同じに設定するか、または2番目の画像サイズを187x187に固定するか、1番目と3番目の画像を180x180に設定して同じものにします。

Answer 4

2番目の画像が小さい理由は、親divにmymember2に余分な15pxのパディングが与えられたためです。

.mymember＃クラスのすべてのパディングCSSを余白に変更し、その幅をページに合わせて小さくすることをお勧めします。

も、私はmemember

.mymember { 
    text-align: center; 
    float: left; 
    width: 31%; 
    box-sizing: border-box; 
    margin: 0 15px; 
} 

、すべての特定のCSSは、一つには、対応するdiv要素