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
Bootstrap 4 carousel not responsive images

Look at this: http://www.consultacultura.it/portale_comunale_della_cultura.asp?IDcomune=1 Carousel images are not responsive like images under of it. They have the same class img-fluid.

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