使用 jQuery 调整父元素的高度以匹配其可见子元素的高度
我有一个在容器中运行的幻灯片,需要容器的高度与可见幻灯片的高度相匹配。不幸的是,这些图像是绝对定位的,我对此无能为力。为了解决这个问题,我使用了一些 jQuery 魔法来处理相同的功能。
由于某种原因,我的代码无法正常工作。每当调整 #container
元素的大小时,该函数就会运行,并且应该将#main
的高度调整为与可见幻灯片的高度相同的值。
但是,呃..没有布埃诺。我的控制台中没有显示任何错误。想法?
http://jsfiddle.net/danielredwood/2G4ky/3/
幻灯片插件:http://jquery.malsup.com/cycle/
HTML:
<div id="container">
<div id="main" class="home" role="main">
<img class="slide" src="http://payload.cargocollective.com/1/0/18788/1279362/452120_800_892531_800.jpg" />
<img class="slide" src="http://payload.cargocollective.com/1/0/18788/1279362/452125_800_37eba7_800.jpg" />
<img class="slide" src="http://payload.cargocollective.com/1/0/18788/1279362/452132_800_7dc0b6_800.jpg" />
</div>
</div>
CSS:
#container {
max-width:960px;
}
#main {
max-width:780px;
height:520px;
margin:0 auto 40px;
overflow:hidden;
background:#ccc;
}
#main img {
width:100%;
height:auto;
}
JavaScript:
$('.home').cycle({
fx:'fade'
});
$('#container').resize(function(){
var child_height = $('.slide:visible').height();
$('#main').css('height', child_height);
});
I've got a slideshow running in a container and need the height of the container to match the visible slide's height. Unfortunately the images are absolutely positioned and there's nothing I can do about it. To deal with that, I'm using a little jQuery magic to take care of the same functionality.
For some reason, my code isn't working. Whenever the #container
element is resized the function runs and is supposed to adjust #main
's height to the same value as the visible slide's.
But, uh.. no bueno. Not showing any errors in my console. Thoughts?
http://jsfiddle.net/danielredwood/2G4ky/3/
Slideshow Plugin: http://jquery.malsup.com/cycle/
HTML:
<div id="container">
<div id="main" class="home" role="main">
<img class="slide" src="http://payload.cargocollective.com/1/0/18788/1279362/452120_800_892531_800.jpg" />
<img class="slide" src="http://payload.cargocollective.com/1/0/18788/1279362/452125_800_37eba7_800.jpg" />
<img class="slide" src="http://payload.cargocollective.com/1/0/18788/1279362/452132_800_7dc0b6_800.jpg" />
</div>
</div>
CSS:
#container {
max-width:960px;
}
#main {
max-width:780px;
height:520px;
margin:0 auto 40px;
overflow:hidden;
background:#ccc;
}
#main img {
width:100%;
height:auto;
}
JavaScript:
$('.home').cycle({
fx:'fade'
});
$('#container').resize(function(){
var child_height = $('.slide:visible').height();
$('#main').css('height', child_height);
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我建议使用插件的回调选项,特别是
after
:已更新JS Fiddle 演示。
参考资料:
cycle()
插件的“回调”文档/演示I'd suggest using the plug-in's callback options, particularly the
after
:Updated JS Fiddle demo.
References:
cycle()
plug-in's 'callback' documentation/demonstration这不是在幻灯片回调之前或之后运行,而是在窗口大小调整时缩放图像。完美的!
Instead of running before or after the slideshows callback, this scales the image as the window resizes. Perfect!
我发现这个效果很好:
其中“.image-box”是图像的容器。
我还将其添加到我的 CSS 中以提高响应能力:
}
I found this to work well:
Where ".image-box" is the container for your images.
I also added this to my CSS for responsiveness:
}