图像与其他图像大小不同吗？

我有这个问题，其中第二个图像稍微小一点，那么它的计数器部分，即使所有的属性（据我所知）是完全一样的？图像与其他图像大小不同吗？

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

图像与其他图像大小不同吗？

回答

相关问题