Flexible Image Example

by LaNsHoR

HTML

<div id="a">
    <div id="b">
        <div id="aux"> <!-- contenedor auxiliar -->
            <div id="c"></div>
        </div>
    </div>
</div>

CSS

#a {width:80%;border:1px solid red;}
#b {width:50%;border:1px solid blue;}
#c {background:green}
* {text-align:center;margin:auto}

/* solución */
#aux
{
    padding-top:50%;
    position:relative;
}
#c
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}