twitter-bootstrap 引导卡图像在 Internet Explorer 中失真
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42095977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap card image distorted in Internet Explorer
提问by ddzone
I'm using bootstrap v4 cards in my layout and unfortunately, the images are distorted in Internet Explorer 11. It seems that IE completely ignores the height: autoattribute given by the img-fluidclass. Is it necessary to apply a custom height to the card images? However, the cards render perfectly in Chrome and Firefox. Interestingly, if I change the engine to IE 10 (in the F12 console), the problem is gone.
我在我的布局中使用了 bootstrap v4 卡，不幸的是，图像在 Internet Explorer 11 中失真。似乎 IE 完全忽略height: auto了img-fluid类提供的属性。是否有必要对卡片图像应用自定义高度？但是，这些卡片在 Chrome 和 Firefox 中呈现完美。有趣的是，如果我将引擎更改为 IE 10（在 F12 控制台中），问题就消失了。
As images with class img-fluidwhich are not wrapped by cards are displayed respecting their original ratio, I think the problem corresponds to the card layout.
由于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>
采纳答案by Zim
Bootstrap 4 is still in alpha so you should expect various issues.
Bootstrap 4 仍处于 alpha 阶段，因此您应该会遇到各种问题。
The issue with image height in IE 11 has already been identified and you can track it here:
IE 11 中的图像高度问题已被确定，您可以在此处进行跟踪：
回答by Christophe Le Besnerais
I had the same problem, but when I wrapped the content of the card in a <a>tag to make it clickable and it fixed itself, but the height of the card was wrong in IE11, I fixed that by adding height: 100%to the <a>tag :
我遇到了同样的问题，但是当我将卡片的内容包裹在一个<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>
If you don't want your card to be clickable, you could replace the <a>by a <div>(I haven't tested it).
如果您不希望您的卡可点击，您可以用<a>a替换<div>（我还没有测试过）。
回答by Maximus
Addding height:100%; can also be done to:
添加高度：100%；也可以做到：
.card img{
height:100%;
}
if you dont want to add another class etc to fix issues in explorer.
如果您不想添加另一个类等来解决资源管理器中的问题。
回答by Jonathan Laliberte
the solution is to add d-block(display:block) to the parent div:
解决方案是将d-block(display:block)添加到父 div：
<div class="card d-block">
<img class="card-img-top" src="someimage.jpg">
</div>
回答by Mihon
use overflow: hiddenfor external container
使用overflow: hidden外部容器
回答by Ras C-kay sKatle
Inline styling do the magic...
内联样式有魔力...
eg.: style="height: 100%; overflow: hidden;"
例如。： style="height: 100%; overflow: hidden;"
回答by Manuel Abascal
This is a known issue. You can fix this by adding width: 100%;
这是一个已知的问题。您可以通过添加来解决此问题width: 100%;
According to docs:
根据文档：
SVG images and IE 10 In Internet Explorer 10, SVG images with .img-fluid are disproportionately sized. To fix this, add width: 100% \9; where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
SVG 图像和 IE 10 在 Internet Explorer 10 中，带有 .img-fluid 的 SVG 图像的大小不成比例。要解决此问题，请添加 width: 100% \9; 在必要时。此修复不正确地调整其他图像格式的大小，因此 Bootstrap 不会自动应用它。
You can check the docs in this link: https://getbootstrap.com/docs/4.3/content/images/
您可以在此链接中查看文档：https: //getbootstrap.com/docs/4.3/content/images/
回答by Tim Vermaelen
Based on the comments in the issue trackerthe only thing that worked for me in IE11 was adding a height: 0.01pxto the card image.
根据问题跟踪器中的评论，在 IE11 中唯一对我有用的是向height: 0.01px卡片图像添加一个。
To make it IE specific I've added the following rule:
为了使其特定于 IE，我添加了以下规则：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10, IE11 */
.card-img-top {
min-height: 0.01px;
}
}
In my case I also have a .card-footerwhich failed to render properly in IE11 with all previous answers. I'm using Bootstrap 4.1.3.
在我的情况下，我也有一个.card-footer未能在 IE11 中正确呈现所有以前的答案。我正在使用 Bootstrap 4.1.3。
回答by Dario Zadro
The best solution for me was to modify IE only.
对我来说最好的解决方案是只修改 IE。
Turns out it was the card-bodytext causing the most issues because it wasn't wrapping properly.
事实证明，这是card-body导致问题最多的文本，因为它没有正确换行。
The cardelement did also need display:block;but again, only on IE.
该card元素确实也需要，display:block;但同样，仅在 IE 上。
No need to add blockfor other browsers, as it can affect using the mt-autoclass or other utilities.
无需为其他浏览器添加块，因为它会影响使用mt-auto类或其他实用程序。
Here's the full solution:
这是完整的解决方案：
<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>
Then, add the following IE10+ only CSS:
然后，添加以下仅适用于 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%;
}
}
回答by Kerry7777
I had the same issue. Just added the regular old school class "img-responsive" & seems to be working fine in Chrome now.
我遇到过同样的问题。刚刚添加了常规的旧学校课程“img-responsive”，现在似乎在 Chrome 中运行良好。
<img class="card-img-top img-responsive" src="images/your-image.jpg" alt="Description">
Update BS version 4:
更新 BS 版本 4：
img-responsive
is now
就是现在
img-fluid
