如何使用jQuery正确设置响应式库的高度

Question

我们在这里设置了一个基于淡入淡出的基本jQuery库：http://jsfiddle.net/k1x5wkbs/

身高要求为：

1. 将.gallery的高度设置为.gallery-item
内的图片高度
2. 如果图库位于.hero内，请将.gallery的高度设置为.hero的高度
3. 如果窗口宽度低于500像素，请将.hero图库的高度设置为.gallery-item内的图片
4. 在页面加载和窗口大小上计算高度

问题：

1. 在某些窗口宽度处，第二个图库的高度未正确计算（请注意其下方的间隙或覆盖下方文本的方式 - 无论是在页面加载还是窗口调整大小时）
2. 宽度低于500时，.hero图库高度计算错误（应始终为500px以下的正方形，且不得有间隙）
3. 优化和集成窗口调整大小事件的最佳方法是什么？

这是我们第一次尝试使用jQuery函数，因此欢迎任何有关组织/优化代码的其他建议。

干杯

本

Answer 1

最后我得到了一些帮助 - 一些布局必须转移到CSS并编写一个新的jQuery插件。

虽然从设计的角度来看这是一个简单的布局，但在CSS中创建实际上是令人惊讶的（像往常一样！）。

.hero-image和.hero-text需要定位上下文更改，因为这些元素指定并定义容器大小（图库始终是其容器的100％。）

.hero {
  position:relative;
}
.hero-text {
  position:relative;
}
.hero-image{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
}

无论如何，这意味着画廊不能通过简单地将类传递给它来设置它的高度 - CSS需要修改，这是一种耻辱。

这是更新的小提琴：http://jsfiddle.net/gaby/fkz7bb6r/5/