title: CSS: limit image width to half page width if it's narrower than the page
body: <p>I have an image floated to the left of some text:</p>
  
  <pre><code>&lt;style&gt;
    img {
      float: left;
    }
  &lt;/style&gt;
  &lt;div&gt;
    &lt;img src="anything.jpg"&gt;
    &lt;p&gt;Lots of text.
  &lt;/div&gt;
  </code></pre>
  
  <p>The image could have any dimensions. I would like to do the following using just CSS, across all form factors:</p>
  
  <ul>
  <li>if the image is at least as wide as the page, display it full width (width: 100%); and</li>
  <li>if the image is narrower than the page, restrict its width to a maximum of half the page width (max-width: 50%).</li>
  </ul>
  
  <p>Is that possible?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Ok, <em>not possible</em> is what I feared, but I really hoped I was just missing something.</p>
  
  <p>I can't create CSS rules/media queries dynamically, all the content is static (in fact there's no server).</p>
  
  <p>I'm wondering if there may be a kludge that's Good Enough: adding a class to the images depending on their size (e.g. .img-500 for images with a width 500px to 599px, .img-600 for 600px to 699px....), and using media queries based on those:</p>
  
  <pre class="lang-css prettyprint-override"><code>@media (min-width: 501px) {
    .img-500 {
      max-width: 50%;
    }
  }
  </code></pre>
  
  <p>Would be interested to hear if anyone has tried that, or knows of a reason that approach is doomed?</p>