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

【问题标题】：bootstrap 4 img-fluid does not change image heightbootstrap 4 img-fluid 不会改变图像高度
【发布时间】：2017-06-11 17:35:09
【问题描述】：

Bootstrap 4 中带有 .img-fluid 类的响应式图像不成比例地调整大小。他们保持它的高度，即使宽度正确缩小。那是使整个图像变形。有什么方法可以让它像在 Bootstrap 3 中一样平滑，类 .img-responsive？谢谢

<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 像素，无论其宽度如何。

【问题讨论】：

请提供实际代码。谢谢。
我也遇到了这个问题。 Carousel 包含在 .row 类中，但不是实际图像。当我删除包装 .row 它仍然不起作用

标签： bootstrap-4 responsive-images

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

您好，我设法通过将标签图片放在图像之前来解决。

问候，

马里奥

【讨论】：

【解决方案3】：

我们有一个带有 Bootstrap 4.x 的 (asp.net core 2.2) 应用程序（公共门户），客户可以上传自己的图像并使用 img-fluid 在各种视图上（具有不同大小）在 flex 中。
图像会通过上传自动缩放（调整大小）到图像显示给最终用户的大小（“查询视图”）。
在编辑视图中，我们必须以正确的纵横比但更小显示图像。
最终用户视图已优化为以 landscape (1) 格式显示图像，但客户也可以上传纵向 (2) 格式的图像（图像然后必须缩放到给定的高度）在最终用户视图上不是问题，因为图像会通过上传自动正确缩放，但在 （较小） 编辑视图中，它肯定是一个问题...

默认情况下，.img-fluid 类应用 max-width: 100%;和高度：自动;到图像：在我的情况下（我设置了宽度），这导致肖像图像的比例缩放到全宽 ( 2 ) ，显示图像
到高的方式 (3 ) 。
我想将高度缩放到给定高度 ( 4 ) （在示例中为 185 像素）。

原则上，我可以将最大高度覆盖到 img-fluid 以获得所需的高度：

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

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

适用于我的案例的唯一解决方案是：
将最大高度覆盖为 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 )，并且不会影响其他视图。
注意：两者都需要设置容器的高度和设置 max-height: 100%。

【讨论】：

【解决方案4】：

刚刚登录以分享这个超级快速且希望最小的更改修复

按照您的风格，只需将 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 上没有任何变化。

【讨论】：

【解决方案5】：

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

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

【讨论】：

@RicardoVigatti 确保列在一行内。查看代码笔示例：codepen.io/brucenorton/pen/pqZyOe

【解决方案6】：

我的魔法秘诀

<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>

【讨论】：

@SteveBuzonas 我的母语不是英语，所以我无法正确解释 :) 但这将有助于解决问题，我希望 :)

【解决方案7】：

实际上height:auto 对我不起作用，但height:100% 工作得像个冠军。

【讨论】：

【解决方案8】：

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

【讨论】：

一个 2 年前的解决方案，当我审查 Bootstrap 时仍然可以节省我
你太棒了。
@SuperEye <div class="row"><img...></div> 应该是 <div><img...></div>

【解决方案9】：

如果您将 css height 属性设置为 auto，那么在调整大小时高度也会变化。

【讨论】：

这是应用于 img-fluid 类的 Bootstrap 4 css 规则：.img-fluid { max-width: 100%;高度：自动； }
@IgorMizak 没错！如果您检查引导文档示例，您会看到它明确设置了height: 250px。这就是它保持固定的原因，所以如果您将其移除，您会在调整大小时看到图像高度发生变化。
是的，只是注意到元素属性高度设置为 250 像素，但我没有在任何地方设置高度。并且图像变形。其实我发现了问题所在：）会自己回答