我有一个随页面宽度缩放的幻灯片,它下面有一个导航栏。但是,当页面变得太宽时,图像会覆盖导航栏。我如何缩放 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>
最佳答案
所以我想出了一种使用 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。
关于html - 如何让我的 div 高度与动态图像高度相匹配?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24957439/