image - 動的な寸法を使用して、絶対に配置された子画像。子に合わせて動的な高さを持つ親が必要

Question

これは CSS ではできないことは理解していますが、Javascript で行うことはできますか?

スライドショーの一部であるため、画像を絶対位置に配置する必要があります。絶対配置を削除すると、新しい各画像が最後の画像の右側に表示されます。divにできるというコードをオンラインで見つけましたが、javascriptを適用して画像の高さを理解することについて何も見つけることができませんでした。

CSS

.slideshowContainer {
border:5px solid #c7eafb;
background:#ebebec;
padding:0px;
margin:0px;
width:90%;
clear:both;
}

#slideshow {
    position:relative;
    width:100%;
height:300px;
padding:none;
margnin:none;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
width:100%;
height:auto;
padding:none;
margin:none;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

HTML

<div class="slideshowContainer">
    <ul id="horizontal-style">
        <li><a href=# >Home</a></li>
        <li><a href=# >About Us</a></li>
        <li><a href=# >Online Courses</a></li>
        <li><a href=# >Registration</a></li>
        <li><a href=# >Faculty</a></li>
        <li><a href=# >Calendar</a></li>
        <li><a href=# >Store</a></li>
        <li><a href=# >Testimonials</a></li>
        <li><a href=# >Online Lectures</a></li>
        <li><a href=# >Contact Us</a></li>
        <li><a href=# >Forum</a></li>
    </ul>
    <div id="slideshow">
        <img src="images/DSC00537.JPG" class="active"/>
        <img src="images/DSC00407.JPG" />
        <img src="images/DSC00566.JPG" />
        <img src="images/JIM_1871.JPG" />
    </div><!-- End slideshow-->
</div> <!-- End slideshowContainer-->  

Jクエリ

$(function() {
    var $slideshow = $('#slideshow'),
    $slides = [],
    active = null;

// build the slides array from the children of the slideshow.  this will pull in any children, so adjust the scope if needed
$slideshow.children().each(function(i) {
    var $thisSlide = $(this);

    // if its the active slide then set it to this index
    if ( $thisSlide.hasClass('active') ) active = i;

$slides.push( $thisSlide );
    });

// if no active slide, take the last one
if ( active === null ) active = $slides.length - 1;

function slideSwitch() {
    // add the last-active class to the previously active slide
    var $lastActive = $slides[active];
    $lastActive.addClass('last-active');

    // find the next slide
    active++;

    // set to zero if it's too high
    if ( active >= $slides.length ) active = 0;

    var $nextActive = $slides[active];

    $nextActive.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $lastActive.removeClass('active last-active');
        });
}

// start the interval
setInterval( slideSwitch, 5000 );
});