Абсолютен център (вертикален и хоризонтален) Отзивчив, не работи

Използвам Bootstrap 3.3.5 и демо 30-lazy-load-images, проблемът е, че контейнерът не може да има фиксирана височина (px), трябва да е „100% или автоматично“, за да бъде съвместим с адаптивен дизайн.

Вижте тази Демо версия

.swiper-container {
    width: 100%;
    height: 500px; // Only work if star height eg 500px, but need this container responsive 100% or auto.

}

въведете описание на изображението тук

Ако е зададена височина: 100% или автоматично, височината на .swiper-container не се инициализира с "0". Как можем да разрешим това? изображението трябва да бъде центрирано като мързеливото натоварване


javascript jquery css twitter-bootstrap swiper
person Colpaisa    schedule 21.07.2015    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Можете да използвате height:50vh;, за да накарате контейнера за плъзгане да показва половината от височината на екрана. Или каквото искате да зададете тази височина.
Тогава това ще бъде отзивчиво.

.swiper-container {
        width: 100%;
        height: 50vh;
    }

Ето го Fiddle.

За малко повече информация относно използването на vh моля, прочетете това.

person AngularJR    schedule 21.07.2015