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

Question

具有类.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像素,而不管它的宽度.

Answer 1

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

Answer 2

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

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

Answer 3

实际上height:auto对我没有用，但height:100%像冠军一样工作。

Answer 4

我的魔法哈克斯

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

Answer 5

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

嗨，我设法通过在图像之前放置标签图片来解决。

问候，

马里奥

Answer 6

如果将 cssheight属性设置为，auto则调整大小时高度也将是可变的。