Question

我有一个相对定位的div，里面有许多绝对定位的图像。 div和image都设置为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。）

Answer 1

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

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

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

这不太理想，但它现在正在做这个伎俩。

根据绝对定位的儿童IMG的高度设定DIV高度

1 个答案: