使用 jQuery 调整父元素的高度以匹配其可见子元素的高度

发布于 2024-11-27 10:57:18 字数 1459 浏览 3 评论 0原文

我有一个在容器中运行的幻灯片,需要容器的高度与可见幻灯片的高度相匹配。不幸的是,这些图像是绝对定位的,我对此无能为力。为了解决这个问题,我使用了一些 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

稚然 2024-12-04 10:57:18

我建议使用插件的回调选项,特别是 after

$('.home').cycle({
    fx:'fade',
    after: function(){
        $('#main').css('height',$(this).outerHeight());
    }
});

已更新JS Fiddle 演示

参考资料:

I'd suggest using the plug-in's callback options, particularly the after:

$('.home').cycle({
    fx:'fade',
    after: function(){
        $('#main').css('height',$(this).outerHeight());
    }
});

Updated JS Fiddle demo.

References:

许一世地老天荒 2024-12-04 10:57:18

这不是在幻灯片回调之前或之后运行,而是在窗口大小调整时缩放图像。完美的!

$(window).resize(function() {
    $('#main').css('height',$('img.slide:visible').height());
});

Instead of running before or after the slideshows callback, this scales the image as the window resizes. Perfect!

$(window).resize(function() {
    $('#main').css('height',$('img.slide:visible').height());
});
但可醉心 2024-12-04 10:57:18

我发现这个效果很好:

$(window).load(function() {
var imageHeight = $(".image-box img").height();
$(".image-box img").parent().css('height', imageHeight);
});

$(window).resize(function() {
var imageHeight2 = $(".image-box img").height();
$(".image-box img").parent().css('height', imageHeight2);
}); 

其中“.image-box”是图像的容器。

我还将其添加到我的 CSS 中以提高响应能力:

.image-box img{
max-width: 100%;
height:auto !important;

}

I found this to work well:

$(window).load(function() {
var imageHeight = $(".image-box img").height();
$(".image-box img").parent().css('height', imageHeight);
});

$(window).resize(function() {
var imageHeight2 = $(".image-box img").height();
$(".image-box img").parent().css('height', imageHeight2);
}); 

Where ".image-box" is the container for your images.

I also added this to my CSS for responsiveness:

.image-box img{
max-width: 100%;
height:auto !important;

}

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文