d-flex div 中的 img 导致图像在 IE 11 的 Bootstrap 4 中溢出

Question

我有一个带有 bootstrap 4 网格系统的页面，它在除 IE 11 之外的所有浏览器上都能正常呈现。我在 jsfiddle 上有这个 snippet，您可以在 IE 11 中查看它以查看图像在 d-flex 内被拉伸容器。我该如何解决这个问题？

<div class="container-fluid">
  <div class="row py-3 justify-content-center">
    <div class="col-3 bg-primary">
      This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image
    </div>
    <div class="col-5 d-flex align-items-center">
      <img class="img-fluid" src="https://www.w3schools.com/w3css/img_lights.jpg">
    </div>
    <div class="col-3 bg-primary">
      This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image
    </div>
  </div>
</div>

Answer 1

网格系统允许整个页面有 12 列，所以试试这个

<div class="container-fluid">
  <div class="row py-3 justify-content-center">
    <div class="col-3 bg-primary">
      This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image
    </div>
    <div class="col-6 d-flex align-items-center">
      <img style=height:100%;width: 100%; src="https://www.w3schools.com/w3css/img_lights.jpg">
    </div>
    <div class="col-3 bg-primary">
      This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image
    </div>
  </div>
</div>