我有图像高度不同的图像(#myimage)。还有一个叠加层(#overlay),它应该完全在这个图像上。我已经将叠加设置为100%,这对我不起作用,因为#someotherstuff不应该从叠加层覆盖..
问题是,如果我不知道高度是多少,我如何确定#myimage的图像高度?但它应该在高度上变化。因此宽度为100%,高度为自动。
<div id="container">
<img id="myimage" src="image.png">
<div id="overlay">
<img src="overlay.png">
</div>
<div id="someotherstuff">
// some other stuff not to cover
</div>
</div>
CSS
#myimage {width:100%;height:auto;}
#overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
答案 0 :(得分:2)
使用jquery执行此操作:
$(document).ready(function(){
image_height = $("#myimage").height();
$("#overlay").height(image_height);
});