根据绝对定位的子 IMG 的高度设置 DIV 高度答案

【问题标题】：Setting DIV height based on height of absolutely positioned child IMG根据绝对定位的子 IMG 的高度设置 DIV 高度
【发布时间】：2012-08-12 01:16:55
【问题描述】：

我有一个相对定位的 div，其中包含许多绝对定位的图像。 div 和图像都设置为 100% 的宽度以填充布局（这是流动的），但我需要能够设置父 DIV 的高度，以便它显示整个图像。

我尝试过类似于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');
});

（已编辑以删除无关的额外内容。再次编辑以包含 jQuery。）

【问题讨论】：

您是否尝试找到<a> 标签的高度？
请编辑以重现您的问题 - jsfiddle.net/L9Cqg
您在 HTML 中使用 id="container"，但在 CSS 中使用 #banner。我应该假设两者都引用相同的 id 吗？
分叉和更新的小提琴jsfiddle.net/sdowswell/XmVu7/1

标签： jquery css css-position

【解决方案1】：

我能够通过在第一张图片完成加载后设置#banner 高度来找到解决方案

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

（使用 window.load 来确保 chrome 从完全加载的图像中收集信息）

这并不理想，但现在可以解决问题。

【讨论】：