Html d-flex div内的img导致IE 11中引导程序4中的映像溢出

我有一个带有Bootstrap4网格系统的页面，它在除IE11之外的所有浏览器上都能很好地呈现。我在JSFIDLE上有这个，您可以在IE 11中查看，以查看图像在d-flex容器中被拉伸。我怎样才能解决这个问题

此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像
此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像

网格系统允许页面上有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>

此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像
此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像此内容长于图像

justify content center

将没有任何意义，我特意为spacingi留下了一列无法理解您希望图像的间距相等，还是？你能提供更多关于你想做什么的信息吗？你在IE11上测试过吗？它在IE10上运行良好，但在IE11中，它会导致图像拉伸，如果您在任何其他浏览器中看到，您将看到图像不仅垂直居中，而且还包含未拉伸的图像。我想在IE11中得到同样的效果，添加这个怎么样？我会检查一下，但是如果我不需要内联的话会更好！