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

Question

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 1

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

Solution 2

.img-max {
  max-width: 500px
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<p class="alert-primary p-3">
  I can set the max-width of the image... but then it stops being responsive.
</p>
  



<div class="container">
  <div class="img-max">
  <img  class=" mx-auto d-block mb-2 float-md-left mr-md-4 img-thumbnail"  src="https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg">
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ipsa ea dolorem mollitia repudiandae odit dolore quod et voluptatem asperiores odio quam ipsam placeat nisi quo voluptate, laborum provident earum?
  </p>
</div>