jquery - 根据绝对定位子 IMG 的高度设置 DIV 高度

Question

我有一个相对定位的 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，即使我没有使用 float 。 这些图像需要绝对定位，所以我无法用 float 来解决。

有什么想法吗？

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。)

Answer 1

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

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

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

这并不理想，但目前可以解决问题。