Bootstrap 4中< img >加w-100无法在flex父容器中放大的问题

这个问题我之前也碰到过，其实是flex布局的默认特性在搞鬼！咱们一步步拆解清楚：

核心原因 #

当你在flex容器里使用align-self-center时，这个类会让元素在垂直方向居中，但同时flex子元素的默认min-width是auto——也就是说，这个align-self-center的div会“紧紧包裹”住里面的图片，它的宽度不会自动拉伸到父容器（col-md-8）的宽度，只会等于图片的原始宽度（父容器变窄时才会跟着缩小）。

这时候你给图片加w-100，它的宽度是相对于这个“包裹住图片”的小div，自然没法超过图片的原始尺寸放大。

解决办法 #

给那个align-self-center的div也加上w-100类，让它先占满父容器的宽度，这样图片的w-100就能基于满宽的父div来拉伸了。另外注意Bootstrap里的flex容器标准类是d-flex，用它更规范：

<div class="row">
  <div class="col-md-8 d-flex">
    <div class="align-self-center w-100"> <!-- 新增w-100类 -->
      <img src="image-w100px.jpg" class="img-fluid w-100">
    </div>
  </div>
  <div class="col-md-4">
    Large amount of text (picture on the left should vertically align.
  </div>
</div>

额外补充两个小细节：

• 如果不想用w-100类，也可以给中间的div加style="min-width: 100%"，效果完全一致，只是用内置类更简洁；
• img-fluid其实已经包含了max-width: 100%; height: auto;，和w-100（width: 100% !important;）搭配使用，既能保证图片拉伸到父容器宽度，又能在父容器变窄时自动缩小，适配性更好。

这样调整后，图片就能正常拉伸到父列的宽度，同时保持和右侧文本垂直居中对齐啦！

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