How to scale image block using only css?

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.

I'm trying to make image in first block scalable.

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?

Here is my code (http://jsfiddle.net/t69f60s6/):

<div style="width: 100%; height: 300px; white-space: nowrap;" id="blockID">

        <div style="max-width: 640;">
            <div style="display: inline-block; height: 300px;  max-width: 300px; width: 100%; background: #ffff00; position: relative; overflow: hidden;" id="pano">
                <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; "/>
            </div>

            <div style="display: inline-block; height: 300px; width: 640px; background: #000;">

            </div>

            <div style="display: inline-block; height: 300px; width: 60px; background: #ff7870;">

            </div>
        </div>
    </div>

UPDATE 1: I have changed the cursive text

UPDATE 2: I can achieve this effect using table css. But table is not good. http://jsfiddle.net/6ng62eb7/4/

Solution

Try to combine display-block and inline-block like here:

<div style="width: 100%; height: 300px; white-space: nowrap;">
    <div style="width: 100%; min-width: 641px; ">
        <div style="display: table-cell; width: 30%; height: 286px; background: #ffff00; max-width: 350px; vertical-align: top;" id="pano">
            <img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" max-width: 90%; margin: 5%; " />
        </div>

        <div style="display: table-cell; width: 70%; min-width: 641px;">

            <div style="display: inline-block; width: 641px; height: 286px; background: #000;" id="content">

            </div>

            <div style="display: inline-block; width: 60px; height: 286px; background: #0044ff;" id="basket">

            </div>
        </div>
    </div>
</div>

http://jsfiddle.net/rfh8dgqu/

I'm not sure about cross-browser compatible but it works in chrome