圖像與其他圖像大小不同嗎？

我有這個問題，其中第二個圖像稍微小一點，那麼它的計數器部分，即使所有的屬性（據我所知）是完全一樣的？圖像與其他圖像大小不同嗎？

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

成員段，三個圓形圖像，中間的一個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>

來源

2016-04-29 Grant Smith

一件事...圖像不在您的演示中循環使用 –

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

來源

2016-04-29 11:54:19

其實你是在mymember2類使用從兩側填充。這就是它造成問題的原因。另外上面的代碼很好，並定義了所有圖像的寬度和高度。

來源

2016-04-29 12:03:21

這是因爲你的第二張圖片大小爲180x180，而另外兩張則是187x187。他們不會有相同的大小，因爲你所有的邊界半徑都是50％。

解決。它可以爲圖像設置相同的尺寸，或者將第二張圖像尺寸固定爲187x187，或者將第一和第三圖像設置爲180x180，以使它們完全相同。

來源

2016-04-29 12:05:40 Abbr

第二張圖片較小的原因是因爲在它的父div中，mymember2被賦予了額外的15px填充。

我建議你改變你的.mymember＃類的所有填充CSS到頁邊距並減少它們的寬度以適合頁面。

還，我建議把1級所有常見的CSS稱爲memember

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

而對於每一個特定的CSS給它相應的div

來源

2016-04-29 12:18:14 MrByte11

我建議您使用瀏覽器的開發人員工具來調整右邊距和內容寬度 – MrByte11

圖像與其他圖像大小不同嗎？

回答

相關問題