Cycle2 по центру с отзывчивой высотой

Я использую плагин Cycle 2. Я пытаюсь сделать слайд-шоу по центру с адаптивной высотой.

http://jsfiddle.net/Tancrede/gnH9H/4/

.slideshow {
    height: 100%;
    width: 100%;
    margin: 0;
    z-index: 1000;
    overflow: hidden;
}

.slideshow img {
    width: auto;
    height: 100%;
    text-align: center;
    opacity: 0;
    filter:alpha(opacity=0);
}

Я хотел бы, чтобы это слайд-шоу работало красиво и плавно. Основные моменты заключаются в том, что изображения будут иметь разные размеры, но все они будут занимать 100% области просмотра, и они должны быть центрированы (даже для обрезки, если область просмотра слишком мала).

Я видел это предложение, которое, кажется, работает (я не знаю, как адаптировать это решение к моей проблеме):

Адаптивный фон с сохраненным соотношением сторон

Но меня интересует только высота, реальный полный экран я не ищу.

Я предполагаю, что решение состоит в том, чтобы использовать javascript, но я не знаю, с чего начать…


jquery slideshow responsive-slides jquery-cycle2
person Tanky    schedule 12.10.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Прошло некоторое время с тех пор, как вы спросили об этом, но я столкнулся с похожей ситуацией и хотел добавить свое решение. Я немного отредактировал вашу Fiddle, чтобы она работала так, как, по моему мнению, вы хотите. Нет необходимости в дополнительном javascript (по крайней мере, не в моей тестовой среде).

http://jsfiddle.net/tvgemert/gnH9H/8/

Установка html, body height на 100% делает свое дело:

body,html {
    margin: 0px;
    background-color: red;
    height: 100%;
}
person tvgemert    schedule 18.02.2014