javascript - 继承图像的宽度(css)

Question

我正在尝试制作一个屏幕，其中 80% 的部分都是图片，底部的 20% 是一个 div。图像样式已设置，因此它会根据高度按比例缩放宽度。高度应填满 80% 的 div。我的问题是我希望底部 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>