html - 图像与其他图像大小不同?

标签 html css

我有这个问题,第二张图片比它的对应部分略小,即使所有属性(据我所知)完全相同?

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

成员(member)版 block ,三张圆形图片,中间一张大小不一?

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

最佳答案

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

关于html - 图像与其他图像大小不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36937623/

相关文章:

javascript - 尽管 robots.txt 配置正确,网站仍出现在 Google SERP 上

javascript - 在 div 中查找 div

html - 动态设置最后一行的 <hr> 分隔线样式

python - 如何切换到iframe窗口?

html - 防止 Slickgrid 重新排序 DOM 元素

javascript - bootstrap tabs CSS box shadow on tab-content bottom not top

javascript - jQuery 动画,从一侧传入,传递和对象,然后从另一侧传出。直线

css - 背景中的 Flash 电影和 Chrome 中固定的位置 => 不良行为

javascript - Chart.js Canvas : can't center it

html - 更改不透明度后,div 后面的复选框变为可见