如何解决IE11中Bootstrap行内响应式图片的留白问题？

Ah, IE11 strikes again with its quirky rendering! I’ve run into this exact issue before—when using Bootstrap’s img-fluid inside a row/col, IE11 doesn’t properly adjust the container’s height as the image scales down, leaving that annoying empty space. Here are a few reliable fixes you can try:

• Add display: block to the image
  IE11 sometimes treats images as inline elements even with Bootstrap’s img-fluid class, which can cause extra spacing below the image. Bootstrap has a built-in utility class d-block that sets display: block—adding this should force IE11 to calculate the image’s height correctly and update the row’s height accordingly:

  <div className="row">
    <div className="col-md-12">
      <img src={headerImage} className="img-fluid d-block" />
    </div>
  </div>
  

• Fix flexbox behavior on the column
  Bootstrap rows use flexbox, and IE11’s flexbox implementation has some bugs around height calculation. Adding a few inline styles to the column can fix this:

  <div className="row">
    <div className="col-md-12" style={{ flexShrink: 1, minHeight: 0 }}>
      <img src={headerImage} className="img-fluid d-block" />
    </div>
  </div>
  

  flexShrink: 1 ensures the column can shrink along with the image, while minHeight: 0 prevents IE11 from locking the column to the original image height even after scaling.

• Wrap the image in a container to clamp height
  If the first two fixes don’t do the trick, wrapping the image in a container with a few style tweaks will force the parent elements to match the image’s current height:

  <div className="row">
    <div className="col-md-12">
      <div style={{ overflow: "hidden", lineHeight: 0 }}>
        <img src={headerImage} className="img-fluid" />
      </div>
    </div>
  </div>
  

  lineHeight: 0 eliminates any extra line spacing IE11 might add to inline elements, and overflow: hidden makes sure the container doesn’t expand beyond the image’s actual size.

• Double-check for conflicting custom styles
  Sometimes your own CSS might be overriding Bootstrap’s defaults. Use IE11’s dev tools (hit F12) to inspect the row and column elements—look for any height or min-height rules that could be forcing the extra space. If you find them, adjust or remove those styles to let the image’s height dictate the container’s size.

These workarounds are tried and tested for IE11’s specific quirks—one of them should get that row height behaving correctly as the image scales.

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