html - 如何让我的 div 高度与动态图像高度相匹配？

Question

我有一个随页面宽度缩放的幻灯片，它下面有一个导航栏。但是，当页面变得太宽时，图像会覆盖导航栏。我如何缩放 div 的大小，以便无论屏幕有多宽，导航栏都贴在图像上？

例子: http://jsfiddle.net/ba9z8/

CSS:

 div.sitenavbar {
     width:100%; 
     background: #333366; 
     height:55px; 
     text-align:center;}
 #slideshow {
     position:relative;
     height:250px;
     width:100%;
 }

 #slideshow IMG {
     position:absolute;
     top:0;
     left:0;
     z-index:8; 
     width:100%;
 }

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

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

HTML:

 <div id="slideshow">
     <img src="https://mylinguistica.com/assets/img/slide1.png" alt="" class="active" />
     <img src="https://mylinguistica.com/assets/img/slides2.png" alt="" />
     <img src="https://mylinguistica.com/assets/img/slides3.png" alt="" />
 </div>
 <div class="sitenavbar">
 test
 </div>

Answer 1

所以我想出了一种使用 javascript 执行此操作的方法。我取了图片的高宽比，然后根据窗口的宽度调整了div:

       $(document).ready(function() {
            var bodyheight = $(document).width();
            bodyheight = bodyheight * .198;
            $("#slideshow").height(bodyheight);
        });

        // for the window resize
        $(window).resize(function() {
            var bodyheight = $(document).width();
            bodyheight = bodyheight * .198;
            $("#slideshow").height(bodyheight);

在我的例子中，图像是 1000x198 像素，所以比率是 .198。