根据绝对定位的孩子的身高设置DIV高度IMG

我有一个相对定位的div，里面有许多绝对定位的图像。 div和图像都设置为100％的宽度来填充布局（这是流体），但我需要能够设置父DIV的高度，以便它将显示整个图像。根据绝对定位的孩子的身高设置DIV高度IMG

我试图接近类似CSS - relative positioned parent div not stretching to absolute child div height和Resize parent div to match absolutly positioned child div height，但孩子图像的高度是回报为0

我甚至试过clearfixes，即使我不使用浮动。这些图像需要绝对定位，所以我无法使用浮动来解析。

任何想法？

http://jsfiddle.net/sdowswell/XmVu7/1/

HTML

<div id="banner"> 
    <a href="newpage.html"><img src="images/banners/image1.jpg" /></a> 
    <a href="othernewpage.html"><img src="images/banners/image2.jpg" /></a> 
</div>

CSS

#banner { 
    width:100%; 
    position:relative; 
} 

#banner>a>img { 
    width:100%; 
}

JQUERY

$(document).ready(function(){ 

     $('#banner').css('overflow', 'hidden'); 
     $('#banner img') 
      .css('position', 'absolute') 
      .css('display', 'none'); 
    $('#banner img').first().css('display', 'block'); 
});

（编辑删除不相关的额外的东西。再次Editted包括jQuery的。）

来源

2012-08-15 sdowswell

您是否尝试找到''标签的高度？ – Fewfre 2012-08-15 18:02:37

请编辑重现您的问题 - http://jsfiddle.net/L9Cqg/ – 2012-08-15 18:05:48

您在HTML中使用'id =“container”'，但在CSS中使用'＃banner'。我是否应该假设都提到相同的ID？ – depa 2012-08-15 18:23:39

我能够通过设置#banner高度找到一个解决方案后的第一个图像已完成加载

$(window).load(function() { 
    $('#banner').css('height', $('#banner img:first').css('height')) 
});

（用于window.load确保Chrome的从充分收集信息加载图片）

这并不理想，但它现在正在诀窍中。

来源

2012-08-15 20:16:12 sdowswell

根据绝对定位的孩子的身高设置DIV高度IMG

回答

相关问题