title: Does HTML/CSS support auto-scaling contents to match/fill container?
body: <p>I'm wondering if there is a CSS-only solution to make contents scale to fit their container, be they images or text, like so:</p>
  
  <pre><code>.container {
      display: inline-block;
      width: 2in;
      height: 1in;
      font-size: fit-to-container /* &lt;- what should this be? */
  }
  
  &lt;div class="container"&gt;Some Text&lt;/div&gt;
  &lt;div class="container"&gt;Another container with significantly 
  more content, and so the font should scale down to fit&lt;/div&gt;
  </code></pre>
  
  <p>Alternatively, with images:</p>
  
  <pre><code>.container {
      display: inline-block;
      width: 2in;
      height: 1in;
      overflow: resize-to-fit /* &lt;- not really, overflow can't do it */
  }
  
  &lt;div class="container"&gt;
   &lt;img src="one.png"/&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
   &lt;img src="one.png"/&gt;
   &lt;img src="two.png"/&gt;
   &lt;img src="three.png"/&gt;
   &lt;img src="four.png"/&gt;
   &lt;img src="five.png"/&gt;
   &lt;img src="six.png"/&gt;
   &lt;img src="seven.png"/&gt;
   &lt;img src="eight.png"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As a visual example, see <a href="https://jsfiddle.net/jarrowwx/jemxLqyL/94/" rel="nofollow noreferrer">https://jsfiddle.net/jarrowwx/jemxLqyL/94/</a>.  But that fiddle doesn't exactly pull it off perfectly, and it was overly complicated to create.  It uses SVG because I was experimenting with just making the contents as a single image and then setting <code>max-width</code>, but that didn't work, either, it just cropped the image.  </p>
  
  <p>Is there is a pure CSS solution to create this effect?</p>