filling li with responsive width/height with an image and text

filling li with responsive width/height with an image and text

i have the following structure:
<ul>
<li>
<div class="A">
<img src="..."/>
</div>
<div class="B">
some text
</div>
</li>
</ul>
Ul and li's are made "responsive" and have fixed aspect ration and
width=100 using padding-top trick.
I trying to figure out how to make image fill the container (li) to the
maximum (stretching vertical/horizontal).
so far what i have for img is:
max-width: 100% !important;
width: auto !important;
margin: auto !important;
max-height: 100% !important;
height: auto !important;
What i want to achieve is that div with text is 100% width and some
height. And image fills the rest of the container. Is it possible with CSS
only?
Or, alternatively, how do I make img and it's container classA to fill the
whole
and have text to fill whatever it needs below the
(outside of it)?
p.s. i'm interested in CSS solutions only, i have some Javascript solution
which checks for window resizing and changes sizes of A/B appropriately.