0

相対的に配置された div があり、その中に多数の絶対配置された画像があります。div と画像はどちらもレイアウトを埋めるために 100% の幅に設定されていますが (これは流動的です)、画像全体が表示されるように親 DIV の高さを設定できる必要があります。

私はCSS に似たアプローチを試みました - 相対位置の親 div は絶対的な子 div の高さに伸びず、絶対位置の子 div の高さに合わせて親 divのサイズを変更しますが、子画像の高さは 0 として返されます。

float を使用していなくても、clearfix を試してみました。これらの画像には絶対配置が必要なため、フロートでは解決できません。

何か案は？

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%; 
}

Jクエリ

$(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 を使用して、クロムが完全にロードされた画像から情報を収集するようにします)

理想的ではありませんが、今のところうまくいっています。

于 2012-08-15T20:16:12.037 に答える