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>

继承图像宽度（css）

1 个答案: