绝对定位的儿童图像，带动态尺寸。需要父母有动态身高以匹配孩子

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

JQUERY

$(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); 
}); 

Answer 1

我想通了。

我在幻灯片放映后添加了与幻灯片放映图像相同比例的空白图像，并将其z-index设置为-1。这允许父div适合周围的空白图像，并相应地调整幻灯片周围。

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--> 
     <!-- I ADDED THE CODE BELOW TO SOLVE THE ISSUE --> 
     <div class="test"> 
      <img src="images/slideshowFiller.JPG" /> 
     </div> 
</div> <!-- End slideshowContainer--> 

附加CSS

.test { 
    margin:none; 
    padding:none; 
    z-index:-1; 
} 
.test img { 
    width:100%; 
    height:auto; 
}