bootstrap 4 img-fluid不会更改图像高度 [英] bootstrap 4 img-fluid does not change image height

问题描述

Bootstrap 4中具有类.img-fluid的响应图像会不成比例地调整大小.即使宽度正确缩小，它们也可以保持高度.那会使整个图像变形.有什么方法可以使它像Bootstrap 3中的.img-respond一样平滑吗?谢谢

Responsive Images in Bootstrap 4, with class .img-fluid are resized disproportionally. They keep it's height even width is shrinking down correctly. That is deforming whole image. Is there any way how to make it as smooth as it was in Bootstrap 3 with class .img-responsive? Thanks

<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像素的高度.

By the way it is same in Bootstrap 4 documentation (https://v4-alpha.getbootstrap.com/content/images/) where sample svg image keeps height 250 pixels regardless of it's width.

推荐答案

问题是我将.row类的图像包装在div中，该类的display属性设置为flex.一旦从父div图像中删除了该类，就可以按预期工作

The problem was I wrapped image in div with class .row which have display property set to flex. once removed this class from parent div image working as expected

这篇关于bootstrap 4 img-fluid不会更改图像高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！