Menu
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.
916
img-fluid may not work and how to fix it. Despite adding the class img-fluid, you may still find your website images not being responsive. The most common cause for this to happen is bootstrap versions conflict.
Images in Bootstrap are made responsive with . img-fluid . max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
how to stretch image in size using bootstrap. you have to set the width of image to 100%, for that you can use Bootstrap class "w-100". keep in mind that "container-fluid" and "col-12" class sets left and right padding to 15px and "row" class sets left and right margin to "-15px" by default. make sure to set them to 0.
Images in Bootstrap are made responsive with . img-fluid . This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.
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
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
