继承图片的宽度（css）

Question

我正在尝试制作一个屏幕，其中80％的屏幕充满图像，而底部20％的屏幕为div。 设置了图像样式，以便将其宽度与高度成比例地缩放。 高度应填充80％格。 我的问题是我希望底部20％的div继承图像的自动缩放宽度。 这是我的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>

这是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>

知道如何使第二个div（twenty_per）具有与status_bg图片相同的宽度吗？ 谢谢

Answer 1

将HTML包裹在没有默认宽度的另一个div中（遵循#background的宽度），并且#twenty_per应该具有100％的宽度。 这样， #twenty_per将自动具有与#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>