Question

Bootstrap 4中的响应式图像，类.img-fluid不成比例地调整大小。他们保持高度均匀宽度正在缩小。这会使整个图像变形。有没有什么方法可以让它像使用类.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像素而不管它的宽度。

Answer 1

问题是我用div .row将图像包装在div中，其显示属性设置为flex。一旦从父div图像中移除此类，按预期工作

Answer 2

实际上ORA-00904: "NOW": invalid identifier 00904. 00000 - "%s: invalid identifier对我不起作用，但height:auto就像一个冠军。

Answer 3

<div class="row">
<picture>
    <img src="images/nameimage.png" class="img-fluid" alt="img">
</picture>
</div>

嗨，我设法通过将标签图片放在图片前面来解决。

此致

Mário

Answer 4

尝试将图像包装在图形元素中。

<div class="col-sm-6">
    <figure>
        <img class="img-fluid" src="/assets/blogs/14853991244821.jpg" alt="">
    </figure>
</div>

Answer 5

我们有一个带有 Bootstrap 4.x 的（asp.net核心2.2）应用程序（公共门户），客户可以上传自己的图像并使用 img-fluid 在各种视图（大小不同）中灵活。
通过上载，图像将自动缩放（调整大小）到最终用户显示图像的大小（“查询视图”）。
在编辑视图上，我们必须显示具有正确长宽比但较小的图像。
最终用户视图经过优化，可以显示 landscape（1）格式的图像，但是客户还可以上传肖像（2）格式的图像（必须缩放到给定的高度）在最终用户视图上这不是问题，因为上传会自动正确缩放图像，但是在（较小）编辑视图中，它肯定< strong>是一个问题...

默认情况下，.img-fluid类适用最大宽度：100％；和高度：自动；图片：在我的情况下（我设置了宽度），这导致人像图像缩放到全宽（2），显示图像的是
升至最高（3）。
我想将高度缩放到给定的高度（4）（在示例中为185 Pixel）。

原则上，我将能够将img-fluid的max-height覆盖为具有所需的高度：

 img-fluid {
  max-height: 185px;
}

但这是一个非常糟糕的想法，因为它会影响所有视图上的所有图像。

唯一适用于 my 案例的解决方案是：
将最大高度更改为100％：

.img-fluid {
  max-height: 100%;
}

并将容器控件的高度明确设置为所需的高度：

<div id="WirUeberUnsFotoUpload" style="height:185px">
   <div> --- Noch kein Foto  hochgeladen --- </div>
</div>

注意：div上的文本“ --- Noch kein Foto hochgeladen ---”已由运行时通过JQuery上载的图像替换。

这会导致想要的结果（5）：

这样，图像（5）被正确缩放到所需的高度（4），并且不会影响其他视图。
注意：既要设置容器的高度，又要设置容器的最大高度：都需要100％。

Answer 6

我的魔法hax

echo number_of_working_hours('2017-12-23 00:30:00', '2017-12-26 12:00:00'); //12
echo number_of_working_hours('2017-12-15 15:00:00', '2017-12-18 12:00:00'); //21
echo number_of_working_hours('2017-12-11 15:00:00', '2017-12-13 12:00:00'); //45

Answer 7

尝试将 .h-100 类添加到 img 元素。这会强制图像的高度与父级 div 匹配。

<div class="col-sm-6">
    <img class="img-fluid h-100" src="/assets/blogs/14853991244821.jpg" alt="">
</div>

Answer 8

如果您将css height属性设置为auto，则调整大小时高度也会不稳定。

Answer 9

只需登录即可共享此超级快速且希望更改更改最少的

以您的样式，只需将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不会发生任何变化。

bootstrap 4 img-fluid不会改变图像高度

9 个答案: