two divs in one div with img in each two, how to autoresize but keep row formation?

Question

I've put two divs (with one image in each) in one principal div. How can I make the CSS to autoresize both divs (with images) to fit size browser but keep the row formation?

The issue with my code is that, the images autoresize but divs will turn in column formation.

fiddle

HTML :

<div id="test">
    <div style="display:inline-block">
        <img src="a.jpg" width="100px" height="100px">
    </div>
    <div style="display:inline-block">
        <img src="b.jpg" width="100px" height="100px">
    </div>
</div>

CSS :

#test{ width:100%; height:100%;}

Answer 1

You may do this :

DEMO

HTML :

<div id="test">
    <div>
        <img src="http://lorempixel.com/output/fashion-q-c-640-480-1.jpg"/>
    </div>
    <div>
        <img src="http://lorempixel.com/output/fashion-q-c-640-480-10.jpg"/>
    </div>
</div>

CSS :

#test div{
    width:50%;
    float:left;
}
#test div img{
    width:100%;
    height:auto;
}