Bootstrap 卡片图像在 Internet Explorer 中失真

Question

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

class 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

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

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

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

Answer 2

我有同样的问题，但是当我将卡片的内容包裹在 <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 3

我遇到了同样的问题。刚刚添加了常规的老派 class "img-responsive" & 现在似乎在 Chrome 中工作正常。

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

更新BS版本4：

img-responsive

现在是

img-fluid

Answer 4

对外部容器使用overflow: hidden

Answer 5

行内样式有魔力...

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

Answer 6

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

来解决此问题

根据文档：

SVG images and IE 10 In Internet Explorer 10, SVG images with .img-fluid are disproportionately sized. To fix this, add width: 100% ; where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.

您可以查看此 link 中的文档：https://getbootstrap.com/docs/4.3/content/images/

Answer 7

添加height:100%；也可以这样做：

.card img{
  height:100%;
}

如果您不想添加另一个 class 等来修复资源管理器中的问题。

Answer 8

解决方案是将 d-block (display:block) 添加到父级 div:

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

Answer 9

根据 issue tracker 中的评论，在 IE11 中唯一对我有用的是在卡片图像中添加 height: 0.01px。

为了使其特定于 IE，我添加了以下规则：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE10, IE11 */
    .card-img-top {
        min-height: 0.01px;
    }
}

在我的例子中，我还有一个 .card-footer 无法在 IE11 中正确呈现所有以前的答案。我正在使用 Bootstrap 4.1.3.

Answer 10

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

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

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

不需要为其他浏览器添加块，因为它会影响使用mt-auto class或其他实用程序。

完整的解决方案如下：

<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%;
    }
}

Bootstrap 卡片图像在 Internet Explorer 中失真

Bootstrap card image distorted in Internet Explorer

css

twitter-bootstrap

internet-explorer-11

bootstrap-4

twitter-bootstrap-4