使用jQuery设置高度而不刷新

Question

我已经在彼此之上创建了2个div.第一个div保存一个WordPress生成的img,第二个div在悬停图像div时从顶部滑入.在普通的CSS中,两个div都有固定的高度,但是当我添加媒体查询时,我需要将图像div的高度更改为auto以保持正确的尺寸.

HTML代码:

<div class="portfolio-page-thumbnail">
  <?php the_post_thumbnail(); ?>
  <div class="portfolio-page-hover">
        <p>BEKIJK PROJECT</p>
  </div>
</div>

CSS:

     .portfolio-page-thumbnail{
        width: 100%;
        height: auto;
     }
     .portfolio-page-hover{
       width: 100%;
       position: absolute;
       top: -50%;
     }

问题是:当我减小浏览器宽度时,图像缩放得很好,但悬停div保持固定高度,因为悬停div具有绝对定位,它无法继承其父级的高度.

我创建了一个jQuery片段来从图像div获取高度并将此高度设置为悬停div.

$(document).ready(function(){
 $(".portfolio-page-hover").height( $(".portfolio-page-thumbnail").height()    );
});

这在刷新时工作正常,但是一旦我减小浏览器宽度,这就不再适用了,我必须再次刷新.通常这很好,但是当我的客户从纵向更改为横向时,它看起来很破碎.我想知道是否有一个解决方案来设置高度'实时'而不刷新？

日Thnx!

Answer 1

您可以将其放在resize事件处理程序中:

$( window ).resize(function() {
    $(".portfolio-page-hover").height( $(".portfolio-page-thumbnail").height());
});

每当窗口重新调整大小时,都会调用此方法.