bootstrap 4 img-fluid does not change image height

bootstrap-4 responsive-images
Igor Mizak picture Igor Mizak · Jan 26, 2017 · Viewed 52.6k times · Source

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.

Answer

Igor Mizak picture Igor Mizak · Jan 26, 2017

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

Related questions

How to lazy load a Bootstrap 4 card's image?

Im trying to figure out how to lazy load card-columns with card-img-top, example: <div class="card-columns"> <div class="card text-center"> <img class="card-img-top lazy" src="img/foo.jpg" alt="foo" /> <div class="card-body"&…

Read More
Change navbar color in Twitter Bootstrap

How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap?

Read More
How can I get my Twitter Bootstrap buttons to right align?

I have a simple demo here: http://jsfiddle.net/HdeZ3/1/ <ul> <li>One <input class="btn pull-right" value="test"></li> <li>Two <input class="btn pull-right" value="test2">&…

Read More