0

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

我尝试了类似于CSS 的方法 - 相对定位的父 div 不拉伸到绝对子 div 高度和调整父 div 大小以匹配绝对定位的子 div 高度，但子图像的高度返回为 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%; 
}

查询

$(document).ready(function(){

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

​</p>

（编辑以摆脱无关的额外内容。再次编辑以包括 jQuery。）

4

1 回答 1

1

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

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

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

这并不理想，但它现在正在发挥作用。

于 2012-08-15T20:16:12.037 回答