title: How to scale image block using only css?
body: <p><em>Here is 3 inline blocks. The first one is scalable and the right two blocks has fixed width.
  In case we resize browser right to block should be visible anyway. #blockID should fit the page, at the same time image should be scalable if we resized window.</em></p>
  
  <p>I'm trying to make image in first block scalable.</p>
  
  <p>I found several ways to do that using JS, but JS is not suitable because of  discreteness. Is there some tricks to do that using only css?</p>
  
  <p>Here is my code (<a href="http://jsfiddle.net/t69f60s6/" rel="nofollow">http://jsfiddle.net/t69f60s6/</a>):</p>
  
  <pre><code>&lt;div style="width: 100%; height: 300px; white-space: nowrap;" id="blockID"&gt;
  
          &lt;div style="max-width: 640;"&gt;
              &lt;div style="display: inline-block; height: 300px;  max-width: 300px; width: 100%; background: #ffff00; position: relative; overflow: hidden;" id="pano"&gt;
                  &lt;img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%;  min-width: 100%;  max-width: 100%; position: absolute; "/&gt;
              &lt;/div&gt;
  
              &lt;div style="display: inline-block; height: 300px; width: 640px; background: #000;"&gt;
  
              &lt;/div&gt;
  
              &lt;div style="display: inline-block; height: 300px; width: 60px; background: #ff7870;"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE 1:</strong>
  I have changed the cursive text</p>
  
  <p><strong>UPDATE 2:</strong>
  I can achieve this effect using table css. But table is not good.
  <a href="http://jsfiddle.net/6ng62eb7/4/" rel="nofollow">http://jsfiddle.net/6ng62eb7/4/</a></p>