title: How to set responsive image's max width (Bootstrap 4)?
body: <p><strong>Question:</strong></p>
  
  <ul>
  <li>How do you set the max-width of an image in Bootstrap 4 while retaining the image's responsiveness?</li>
  </ul>
  
  <p><strong>Background:</strong> </p>
  
  <ul>
  <li>Boostrap 4's <code>.img-fluid</code> class makes images responsive. </li>
  </ul>
  
  <blockquote>
    <p>max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element (<a href="https://getbootstrap.com/docs/4.1/content/images/" rel="noreferrer">https://getbootstrap.com/docs/4.1/content/images/</a>)</p>
  </blockquote>
  
  <p><strong>My situation:</strong></p>
  
  <ul>
  <li>See <strong>JS Fiddle</strong>: <a href="https://jsfiddle.net/aq9Laaew/290257/" rel="noreferrer">https://jsfiddle.net/aq9Laaew/290257/</a></li>
  <li>I have an image that is very big... too big. </li>
  <li><p>I have set <code>max-width: 500px</code> (inline styling), and this sets the image's width - Awesome. </p></li>
  <li><p><strong>Problem</strong>: It does not resize / respond when you shrink the window size... It is no longer responsive. </p></li>
  </ul>
  
  <p>Hope that was clear; I've tried to look for similar questions here but wasn't successful. Cheers!</p>