Question:
Background:
.img-fluid
class makes images responsive. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element (https://getbootstrap.com/docs/4.1/content/images/)
My situation:
I have set max-width: 500px
(inline styling), and this sets the image's width - Awesome.
Problem: It does not resize / respond when you shrink the window size... It is no longer responsive.
Hope that was clear; I've tried to look for similar questions here but wasn't successful. Cheers!
Your answer is here
.img-max {
max-width: 500px;
width:100%;
}
and use the class in the image.
I have edited your fiddle. Please refer the link