Question

我有一个幻灯片，可以根据页面的宽度和它下面的导航栏进行缩放。但是，当页面太宽时，图像会覆盖导航栏。如何缩放div的大小，以便无论屏幕有多宽，导航栏都会粘贴到图像上？

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

在我的情况下，图像是1000x198px，所以比例是.198。

如何获得div高度以匹配动态图像高度？

1 个答案: