Изменение размера Colorbox при изменении размера окна

Colorbox, кажется, хорошо подходит «из коробки» для адаптивного дизайна. Я переопределяю настройки размеров по умолчанию с помощью процентов, а затем устанавливаю максимальные значения, чтобы все не выходило из-под контроля на огромных экранах:

$.colorbox.settings.width = "92%";
$.colorbox.settings.height = "90%";
$.colorbox.settings.maxHeight = 850;
$.colorbox.settings.maxWidth = 1200;

Это работает. Я также делаю размер элемента cboxTitle точно такой же ширины img над ним, чтобы мои иногда длинные подписи всегда были красиво выстроены.

$(document).bind('cbox_complete', function(){
    var photoWidth = $(".cboxPhoto").innerWidth();
    var photoContainer = $("#cboxContent").outerWidth();
    var leftPix = (photoContainer - photoWidth) / 2;    
    $("#cboxTitle").css({'left' : leftPix, 'width' : photoWidth});
});

Что тоже, кажется, работает. Это оставляет страшную часть: иметь дело с событиями изменения размера окна. Я пытаюсь использовать следующее событие

$(window).on("resize", function(){
    $.fn.colorbox.resize({
        height: "90%",
        width: "92%"
    });
});

(на самом деле я использую пользовательское событие debouncedresizeвместо стандартного jquery resize, чтобы ограничить поток событий изменения размера в Webkit, но я оставляю эту часть, потому что она не имеет значения. ТожеЯ повторяю те же процентные значения ширины и высоты в параметрах изменения размера, потому что в противном случае изменение размера не происходит. :( )

Эта последняя часть вообще не работает. Я попытаюсь разобрать проблемы:

1) Когда пользователь загружает colorbox стандартного размера destop, а затем масштабирует окно просмотра более узким, высота элемента cboxPhotoне масштабируется правильно. Ширина уменьшается правильно, но высота остается прежней, создавая «сжатие». Поэтому я попытался добавить height:autoв css для cboxPhoto. Это восстанавливает соотношение сторон, но теперь элемент cboxPhotoслишком велик и обрезан. Я получаю полосы прокрутки внутри модала, когда я этого не делал раньше. Фотография не того размера, в котором она была бы, если бы я закрыл colorbox и снова открыл его в новой ширине окна просмотра браузера.

2) CSS для cboxTitleне пересчитывается.Функция изменения размера colorbox не инициирует событие cbox_complete. Не так ли?

Я хотел бы исправить эти проблемы, но я также чувствую, что, возможно, самый простой способ решить этот вариант использования, учитывая текущее состояние плагина, - это просто закрыть и перезагрузить весь цветовой ящик при изменении размера окна, но вернуться к тому же содержимому в галерее, которое пользователь просматривал до события изменения размера. Но мне совершенно неясно, как это кодировать. Заранее спасибо за любую помощь!

P.S. Все, пожалуйста, избавьте меня от аргумента, что только дизайнеры изменяют размеры окон. Извините, я просто не покупаю это. Люди масштабируются, когда потрясающая фотография находится на экране, а планшеты особенно поворачиваются все время...