继承图片的宽度（css）

Question

I'm trying to make a screen that 80% of it is filled with an image and the bottom 20% is a div. The image style is set so it will scale it's width proportionally to it's height. The height should fill the 80% div. My problem is that I want the bottom 20% div to inherit the automatically scaled width of the image. Here is my css:

<style type="text/css">
    #background {
width: 100%; 
height: 100%; 
position: relative; 
overflow:hidden;
left: 0px; 
top: 0px; 
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
max-width:100%;
height:80%;   
}
</style>

And here is the HTML:

<div id="background" >
  <img id="status_bg" src="online_pend_off.jpg" class="stretch">
</div>
<div id="twenty_per" style="background-color:blue">
</div>

Any idea how can I make the second div (twenty_per) have the same width as status_bg image? Thanks

Answer 1

Wrap the HTML inside another div with no default width (to follow #background s width), and #twenty_per should have 100% width. This way, #twenty_per will automatically have the same width as #background .

CSS

.wrapper {
    display: inline-block;
}

#twenty_per {
    width: 100%;
}

HTML

<div class="wrapper">
    <div id="background" >
        <img id="status_bg" src="online_pend_off.jpg" class="stretch">
    </div>
    <div id="twenty_per" style="background-color:blue"></div>
</div>