Блог

у меня есть сайт на базе php, которому необходимо отображать изображения на главной странице произвольных пропорций. требование состоит в том, чтобы они заполняли окно браузера, но сохраняли их соотношение сторон.

по какой-то причине у меня возникли некоторые проблемы с запуском этого плагина jquery cycle.

по сути, серверный код просто извлекает их из базы данных и помещает элементы img в div. я считываю размеры изображений с помощью php и записываю это в элемент alt

затем в моем коде javascript у меня есть это:

 $(document).ready(function() {
  var window_h = $(window).height();
  var window_w = $(window).width();
  // sets the div that contains the jquery cycle images
  $('#homepage-background-images').width(window_w);
  $('#homepage-background-images').height(window_h);

$(window).resize(function() {
 window_h = $(window).height();
 window_w = $(window).width();
 $('#homepage-background-images').width(window_w);
 $('#homepage-background-images').height(window_h);
});

// homepage cycle
$('#homepage-background-images').cycle({
  fx: 'fade',
  speed: 5500,
  fit: 1,
  width: window_w,
  height: window_h,
});
  

// …

Очевидно, что это не сработает, поскольку каждое изображение имеет разное соотношение сторон, но мне было интересно, как можно передать последовательные соотношения сторон в цикл jquery? При этом всегда необходимо учитывать размер окна браузера…

Я пытался использовать опцию ‘before’ в jquery, но, похоже, вы не можете реально повлиять на свойства изображения там. Я пытался использовать это для изменения переменной window_h на основе быстрого вычисления соотношения сторон, но даже обновление этого в моей функции onBefore, похоже, не дает никакого результата для циклических изображений…

Есть идеи? Это сложно или я просто упускаю что-то очевидное?

Спасибо! — J

Если вы используете CSS max-width и max-height экземпляр HTML width и height он не теряет соотношения сторон. Попробуйте добавить style атрибут к своему изображению