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

问题描述

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

<img class="img-fluid" src="/assets/blogs/14853991244821.jpg" alt="">

顺便说一下，它在 Bootstrap 4 文档(https://v4-alpha.getbootstrap.com/content/images/)，其中示例 svg 图像保持高度 250 像素，无论其宽度如何.

解决方案

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

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>

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.

解决方案

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