title: Display image at 100% width iff the width of div is less than actual width of image
body: <p>This is my HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;img src='image.png'&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my CSS:</p>
  
  <pre><code>img {
      width: 100%;
      color: orange;
      background-color: orange;
  }
  
  div {
      width: 200px;
      height: 500px;
      border: 1px solid black;
  }
  </code></pre>
  
  <p>fiddle: <a href="http://jsfiddle.net/ro764g6o/" rel="nofollow">http://jsfiddle.net/ro764g6o/</a></p>
  
  <p>The image becomes 100% width of what the div is. Is there a way I can say "Use the original width of the image if the '100%' (the width of the container) is greater than the original width of the image"? </p>
  
  <p>For example, assume the div's width is 50px and the images original width is 60px (the width of the div is dynamically generated based on screen size. The image is determined by the end user). In this case, the width of the image should be 100%. </p>
  
  <p>However, if the div's width is 70px and the images original width is 60px, then the width should remain the same.</p>
  
  <p>Is there anyway to achieve this with HMTL and CSS? If no, is there anyway to achieve this using Django / Python?</p>