使用jQuery设置高度而不刷新

I have created 2 divs on top of each other. The first div holds a WordPress generated img and the second div slides in from the top when hovering the image div. In the normal css both divs have a fixed height, but when i add media queries i need to change the height of the image div to auto to maintain the right dimensions.

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

HTML code:

<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%;
     }

Here is the problem: When decreasing my browser width, the image scales just fine, but the hover div stays at a fixed height and because the hover div has an absolute positioning, it cant inherit the height from it's parent.

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

I created a jQuery snippet to take the height from the image div and set this height to the hover div.

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

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

And this works fine on refresh, but as soon as I decrease my browser width, this no longer applies and I have to refresh again. Normally this is just fine, but when my client changes from portrait to landscape, it appears broken. I'd like to know if there is an solution to set the height 'real time' without refreshing?

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

Thnx!

3 个解决方案

#1

You could place it inside a resize event handler:

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

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

This will get called whenever the window is re-sized.

只要重新调整窗口大小,就会调用此方法。

#2

I figured I'd turn my comment into an answer. Same answer as Spencer however it calls a function so you don't have to write it multiple times.

我想我会把我的评论变成一个答案。与Spencer相同的答案,但它调用一个函数,因此您不必多次写入它。

$(document).ready(function(){
 myFunc();
});

$(window).resize(function(){
 myFunc();
});

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

More information about jQuery's resize event handler here

有关jQuery的resize事件处理程序的更多信息,请参见此处

#3

Ok, first of all, thnx to all you guys/girls for your help. I found a solution by combining the above answers.

好的,首先,thnx给你们所有人/女孩寻求帮助。我通过结合上述答案找到了解决方案。

Result:

 // Sets the right height to the Hover element
 function myFunc() {
    $(".portfolio-page-hover").height( $(".portfolio-page-thumbnail").height());
 }

  //Sets the correct height on refresh
  myFunc(); 

  // sets height when resizing the window
  $( window ).resize(function() {
    myFunc();
  });

Note: This code will be placed inside another code that allready has a document.ready function.

注意:此代码将放在另一个已经具有document.ready函数的代码中。

Is it written the correct way? Or can the code be cleaner?

它的写法是否正确?或者代码可以更干净吗?

#1