#javascript #jquery #css #dom #cycle
#javascript #jquery #css #dom #цикл
Вопрос:
у меня есть сайт на базе 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
Ответ №1:
Если вы используете CSS max-width
и max-height
экземпляр HTML width
и height
он не теряет соотношения сторон. Попробуйте добавить style
атрибут к своему изображению