Menu
I am using bootstrap 3.3.6 and I am using class img-responsive for image responsiveness.
I have found a new class name img-fluid, but it's not present in 3.3.6 version.
Can anyone tell what is the difference between img-responsive and img-fluid?
img-responsive just resizes the image as per parent container size which we can achive it using css property width: 100% and height: auto. Then why to use imag-responsive class?
883
In Bootstrap 4 you would use the . img-fluid class on all images you would like to be responsive. This class tells the browser not to expand the image larger than its original size using a max-width. And it also tells it to scale down the image if the browser window gets narrower than the image pixel width.
.img-responsive. Makes an image responsive (will scale nicely to the parent element)
Create responsive images by adding an . img-responsive class to the <img> tag. The image will then scale nicely to the parent element.
Every one of those four Bootstrap Grid types becomes responsive only if you assign to it its own designated CSS class. For example, to make a div responsive for extra small devices, the div must have its own Bootstrap . col-xs-<number_of_columns_to_take> class, like <div class=”col-xs-6″>.
img-responsive was in Bootstrap 3, img-fluid is in Bootstrap 4 since beta version.
Removes display: block; from .img-fluid. Responsive image behavior is not dependent on display: block;, so we can safely remove it on our end. Should you need block level, you can easily override that in the source or with a utility class.
.img-fluid {
max-width: 100%;
height: auto;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
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
