Search code examples
cssbootstrap-4responsiveness

How to set responsive image's max width (Bootstrap 4)?

Question:

  • How do you set the max-width of an image in Bootstrap 4 while retaining the image's responsiveness?

Background:

  • Boostrap 4's .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:

  • See JS Fiddle: https://jsfiddle.net/aq9Laaew/290257/
  • I have an image that is very big... too big.

  • 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!

Solution

  • 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

    jsfiddle.net/saravanan7944/ygamjz7s/1