图片尺寸异常咨询：三张图片等分宽度排列失效问题

嘿，我明白你遇到的麻烦了——用Flexbox想让三张图片一行等分宽度、统一高度，但最后一张不听话，尺寸没按预期来，对吧？咱们来一步步拆解问题，搞定它！

首先看你写的代码：

.activity-snippets { display: flex; }
.activity-post-link { height: 215px; width: 33.33333333%; }

<div class="activity-snippets">
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
</div>

问题出在哪？ #

你只给图片的父容器.activity-post-link设置了宽高，但图片本身并没有被约束尺寸。浏览器默认会按照图片的原始宽高比来渲染，哪怕父容器大小变了，图片还是会“我行我素”，要么撑破容器，要么保持原尺寸，导致容器的高度设置失效，宽度也没法真正占满33.33%的空间——最后一张的偏差大概率是浏览器对百分比宽度的四舍五入加上图片原始尺寸的影响。

怎么修复？ #

咱们给图片加上尺寸约束，再优化容器的布局属性就行：

1. 让图片填满父容器
   给img添加样式，强制它继承父容器的尺寸，同时保持比例（可选）：

.activity-post-link img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 推荐用这个，保持图片比例，裁剪多余部分；如果想要完整显示图片可以用contain */
}

这里width:100%和height:100%让图片完全占满父容器，object-fit避免图片拉伸变形，根据你的需求选就行。

2. 确保容器宽度计算准确
   给.activity-post-link加上box-sizing: border-box，这样内边距、边框不会额外占用宽度，保证33.33%的宽度是精确的：

.activity-post-link {
  height: 215px;
  width: 33.33333333%;
  box-sizing: border-box;
  margin: 0; /* 清除默认外边距 */
  padding: 0; /* 清除默认内边距 */
}

完整修正后的代码 #

.activity-snippets { 
  display: flex; 
}
.activity-post-link { 
  height: 215px; 
  width: 33.33333333%; 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.activity-post-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="activity-snippets">
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
</div>

这样修改后，三张图片就会乖乖在一行等分宽度，同时统一高度啦！

内容的提问来源于stack exchange，提问作者Naomi