title: image with a preferred width, min-width and max-width
body: <p>I have an image which I'd like to scale according to the following rules with increasing importance:</p>
  
  <ul>
  <li>normally has a width of 38% (of the parent/screen);</li>
  <li>not become smaller than 300px;</li>
  <li>never become larger than 100% (of the parent/screen) (only an issue if the parent/screen is smaller than 300px;</li>
  </ul>
  
  <p>That is to say: the image takes only a percentage of the available space but should not become too small on smaller screens. However, for very small screens (mobile devices), the image may never exceed the full width of the available space, even if this would mean it shrinks below the minimum width.</p>
  
  <p>I thought I could do this with the following css:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>img {
      width: 38%;
      min-width: 300px;
      max-width: 100%;
  }
  </code></pre>
  
  <p>thinking that the <code>max-width</code> would take preceedence over the <code>min-width</code> because it appears later. But it is not working... The image appears as the required percentage and is not shrinking below 300px. However, on a small screen (&lt;300px), the image extends out of the screen (scrollbars appear).</p>
  
  <p>Reading the docs, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width" rel="nofollow"><code>min-width</code> overrides <code>max-width</code></a>, so I should have seen this coming...</p>
  
  <p>One obvious solution would be to add a media query:</p>
  
  <pre class="lang-css prettyprint-override"><code>@media screen and (max-width: 300px) {
      img {
          min-width: 0;
          width: 100%;
      }
  }
  </code></pre>
  
  <p>However, I would like to be able to override the width specifics (i.e. the 38% or the 300px values) from within the html (tag style).</p>
  
  <p>Several questions on SO touch on the topic of sizing, but I could not find one about my exact case. Anyone here with a solution/suggestion?</p>
  
  <p>Some side requirements:</p>
  
  <ul>
  <li>should work in major browsers, html5/css3</li>
  <li>no javascript (if it turns out that it's not possible with css only, I will create a js solution, but I prefer no js for this)</li>
  <li>no media queries (see above)</li>
  <li>I am in control of the html, so nesting inside additional elements is fine if needed</li>
  </ul>