具有类.img-fluid的Bootstrap 4中的响应图像被不成比例地调整大小。它们保持高度均匀宽度正在缩小。这会使整个图像变形。有没有什么方法可以让它像使用类.img响应的Bootstrap 3一样流畅？谢谢
<div class="col-sm-6">
<img class="img-fluid" src="/assets/blogs/14853991244821.jpg" alt="">
</div>
顺便说一句，它在Bootstrap 4文档（https://v4-alpha.getbootstrap.com/content/images/）中是相同的，其中样本svg图像保持高度250像素，而不管它的宽度。
问题是我用div .row将图像包装在div中，其显示属性设置为flex。一旦从父div图像中删除此类，按预期工作
实际上height:auto并不适合我，但height:100%就像一个冠军。
尝试将图像包装在图形元素中。
<div class="col-sm-6">
<figure>
<img class="img-fluid" src="/assets/blogs/14853991244821.jpg" alt="">
</figure>
</div>
我的魔法之谜
<style>
figure {
margin: 16px 40px !important;
}
.img-fluid {
max-width: 100%;
height: auto;
}
</style>
<div class="row align-items-center">
<div class="col-lg-2">
<figure>
<img class="img-fluid" src="path-image.png" />
</figure
</div>
</div>
如果将css height属性设置为auto，则调整大小时高度也会变得不稳定。
刚刚登录分享这个超级快速，希望最小的修改
在你的风格，只需将min-height设置为1px或1rem
<head>
...
<style>
.ieFix
{
min-height:1px;
}
</style>
</head>
<body>
<div class="card text-center">
<img src="..." class="card-img-top ieFix" alt="...">
<div class="card-body">
<h5 class="card-title">...</h5>
<p class="card-text">...</p>
<p class="card-text post-meta"...</p>
</div>
</div>
</body>
已确认此功能在手机和平板电脑屏幕上的Chrome上没有任何变化。