title: Make images scale to parent div only when larger, all while using an explicit max-width
body: <p>I can make an image scale responsively to a parent div on smaller screens but still limit to an explicit max width:</p>
  
  <pre><code>img {
      max-width: 500px;
      width: 100%;
  }
  </code></pre>
  
  <p>However, if the image is smaller than the parent div, it is still stretched to fill the div. </p>
  
  <p>Is there a way to have it scale to 100% only when it is larger and maintain its original dimensions when it is smaller, without knowing the image's dimensions beforehand?</p>