继承图像宽度(css)

inherit width of image (css )

本文关键字：css 图像 继承      更新时间：2023-09-26

我试图使一个屏幕，它的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图像相同的宽度?由于

将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>
相关文章：