Как использовать JQuery, чтобы правильно установить высоту отзывчивой галереи

Question

Мы имеем основную увядают на основе JQuery галерея создана здесь: http://jsfiddle.net/k1x5wkbs/

Требование высоты: высота

1. Набора .gallery до высоты изображения внутри .gallery-item
2. Если галерея находится внутри .hero, устанавливается высота .gallery по высоте .hero
3. Если ширина окна ниже 500px, установите высоту .hero галереи к изображению внутри .gallery-item
4. ли высота рассчитывается на странице загрузки и изменения размеров окна

Проблемы:

1. В определенные ширины окна, высота второй галереи не рассчитана правильно (обратите внимание на зазор под ним или на то, как он покрывает текст ниже - либо на загрузку страницы, либо на размер окна)
2. При ширине под 500, .hero Высота галереи неверно рассчитана (она всегда должна быть квадратом ниже 500 пикселей без зазора под ней)
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; 
} 

Во всяком случае, это означает, что галерея не может иметь a это высота, заданная просто передачей ему класса - CSS требует модификации, что является позором.

Вот обновленная скрипка: http://jsfiddle.net/gaby/fkz7bb6r/5/