Question

我在我的布局中使用了bootstrap v4卡，不幸的是，Internet Explorer 11中的图像失真。似乎IE完全忽略了height: auto类给出的img-fluid属性。是否有必要对卡片图像应用自定义高度？但是，这些卡在Chrome和Firefox中完美呈现。有趣的是，如果我将引擎更改为IE 10（在F12控制台中），则问题就消失了。

由于没有卡片包装的类img-fluid的图像会按照原始比例显示，我认为问题对应于卡片布局。

   <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/1.jpg" alt="Step 1" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 1</h3>
              <p class="card-text">Text 1</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/2.jpg" alt="Step 2" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 2</h3>
              <p class="card-text">Text 2</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/3.jpg" alt="Step 3" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 3</h3>
              <p class="card-text">Text 3</p>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

我遇到了同样的问题，但是当我将卡片的内容包裹在<a>标签中以使其可点击并且自行修复时，但是卡片的高度在IE11中是错误的，我修复了将height: 100%添加到<a>代码：

<div class="col-md-4">
    <div class="card h-100">
        <a href="/document" style="height:100%;">
            <img class="card-img-top img-fluid" src="foo.jpg">
            <div class="card-block">
                <h4>doc number 4</h4>
                <p class="card-text">yada yada</p>
            </div>
        </a>
    </div>
</div>

如果您不希望自己的卡可以点击，则可以将<a>替换为<div>（我尚未对其进行测试）。

Answer 2

Bootstrap 4仍处于alpha状态，因此您应该会遇到各种问题。

IE 11中的图像高度问题已经确定，您可以在此处进行跟踪：

https://github.com/twbs/bootstrap/issues/21885

Answer 3

附加高度：100％；也可以做到：

.card img{
  height:100%;
}

如果您不想添加其他类来修复资源管理器中的问题。

Answer 4

对我来说最好的解决方案是仅修改IE。

原来是card-body文本引起最多的问题，因为它没有正确包装。

card元素也确实需要display:block;，但同样仅在IE上需要。

无需为其他浏览器添加阻止，因为它可能会影响使用mt-auto类或其他实用程序。

这是完整的解决方案：

<div class="card ie-block">
    <img src="https://picsum.photos/500/300" class="card-img-top" />
    <div class="card-body">
        <div class="ie-wrapper"><h5 class="card-title ie-inner">Card title</h5></div>
        <div class="ie-wrapper"><p class="card-text ie-inner">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div>
        <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

然后，仅添加以下IE10 + CSS：

/* IE10+ specific styles go here */  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    .ie-block {
        display: block;
    }
    .ie-wrapper {
        display: flex;
    }
    .ie-inner {
        flex-basis: 100%;
    }
}

Answer 5

将overflow: hidden用于外部容器

Answer 6

内联样式神奇……

例如：style="height: 100%; overflow: hidden;"

Answer 7

这是一个已知问题。您可以通过添加width: 100%;

来解决此问题

根据文档：

SVG图像和IE 10在Internet Explorer 10中，带有 .img-fluid的大小不成比例。要解决此问题，请添加宽度：100％ \ 9;在必要时。此修复程序不适当地调整了其他图像格式的大小，因此 Bootstrap不会自动应用。

您可以在以下链接中检查文档：https://getbootstrap.com/docs/4.3/content/images/

Answer 8

解决方案是将d-block（display：block）添加到父div：

<div class="card d-block">
    <img class="card-img-top" src="someimage.jpg">
</div>

Answer 9

我有同样的问题。刚刚添加了常规的旧学校课程＆＃34; img-responsive＆＃34; ＆安培;现在似乎在Chrome中工作正常。

<img class="card-img-top img-responsive" src="images/your-image.jpg" alt="Description">

更新BS版本4：

img-responsive

现在是

img-fluid

Internet Explorer中的Bootstrap卡图像失真

9 个答案: