Question

我有这个问题，第二个图像比它的计数器部分略小，即使所有属性（据我所知）都完全相同？

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

会员部分，三个圆形图像，中间一个是不同的大小？

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

这是因为您的第二个图片尺寸为180x180 ，而其他两个 187x187 。它们的大小不一样，因为你使用的边框半径为50％。

要解决。它要么为图像设置相同的尺寸，要么将第二图像尺寸固定为187x187，或者将第一和第三图像尺寸固定为180x180以使它们全部相同。

Answer 4

第二个图像较小的原因是因为在其父div中，mymember2被赋予了额外的15px填充。

我建议你将.mymember＃classes的所有填充css更改为边距，并减小它们的宽度以适应页面。

另外，我建议将所有常见的CSS放在一个名为memember的类中

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

并且对于每个特定的css，将它分配给相应的div

图片与其他图片的尺寸不同？

4 个答案: