Jquery - слайд-шоу шириной 100% с сохранением высоты пропорционально - PullRequest
0 голосов
/ 22 марта 2011

Как мне создать слайд-шоу полной ширины, в котором его высота пропорциональна ширине?

Итак, у меня есть css для создания полноразмерного изображения с сохранением его пропорции:

#featured-slideshow {
    width: 100%;
}
#featured-slideshow .slideshow {
    width: 100%;
}
#featured-slideshow .slideshow img {
    width: 100% !important;
    min-height: 300px;
    min-width: 892px;
}

И наценка:

<div id="featured-slideshow">
    <div class="slideshow">
        <img src="images/slideshow/image-1.jpg" />
        <img src="images/slideshow/image-2.jpg" />
        <img src="images/slideshow/image-3.jpg" />
    </div>
</div>

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

Любая помощь будет принята с благодарностью - я открыт для использования других плагинов или решений для слайд-шоу.

Большое спасибо

Ответы [ 2 ]

2 голосов
/ 10 мая 2012

Большинство слайд-шоу jquery должны быть совместимы с атрибутом media для ссылки на разные таблицы стилей для экрана разных размеров.

<link rel="stylesheet" media="screen and (min-width: 1431px) and (max-width: 1799px)" href="css/stylefifteen.css">

Поэтому установите разные размеры слайд-шоу для экранов размером 13, 15, 21 и 27, и в каждой таблице стилей убедитесь, что размер рамки слайд-шоу, а также класс img изменяются соответствующим образом.

Демонстрацию можно посмотреть здесь (нерабочий веб-сайт - ссылка приведена исключительно для этого примера) - перетащите экран на другой размер, и слайд-шоу должно соответственно измениться с 13 "до 27" экрана.

Пример масштабирования слайд-шоу

Я обнаружил, что это гораздо лучше, чем пытаться получить решение «на лету», которое масштабирует его как суперразмерное (хотя суперразмерное отлично подходит для фоновых изображений)

0 голосов
/ 22 марта 2011

Возможно jquery-supersized больше подходит для того, что вы пытаетесь сделать.

...