javascript цикл jquery изменяет масштаб изображения в окне браузера, НО сохраняет соотношение сторон - PullRequest
0 голосов
/ 22 мая 2011

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

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

по сути, серверный код просто извлекает их из базы данных и помещает элементы 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

1 Ответ

0 голосов
/ 22 мая 2011

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

...