Twitter Bootstrap carousel отзывчивый не работает правильно

Question

Хорошо, у меня есть довольно прямой вопрос, и я не думаю, что потребуется множество примеров. В основном у меня есть карусель Bootstrap с изображением 1500px x 550px, и он настроен на 100% ширины экранов. Когда я минимизирую экран, высота изображения остается неизменной при уменьшении ширины, что приводит к искажению изображения, как его сжимают вместе. Вот моя простая карусель:

<div id="myCarousel" class="carousel slide"> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item">…</div> 
    <div class="item">…</div> 
    <div class="item">…</div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

и здесь sthe CSS стиль у меня есть для этого

.carousel { 
     margin-bottom: 60px; 
     margin-top:-16px; 
    } 

    .carousel .container { 
     position: relative; 
     z-index: 9; 
    } 

    .carousel-control { 
     height: 80px; 
     margin-top: 0; 
     font-size: 120px; 
     text-shadow: 0 1px 1px rgba(0,0,0,.4); 
     background-color: transparent; 
     border: 0; 
     z-index: 10; 
    } 

    .carousel .item { 
     height: 550px; 
    } 
    .carousel img { 
     position: absolute; 
     top: 0; 
     left: 0; 
     min-width: 100%; 
     height: 550px; 
    } 

Теперь я пытался использовать медиа-запросы, но он фиксирует только проблему высоты для определенного количества ширину экрана и, поскольку вы продолжаете минимизировать экран, он снова становится беспорядочным. Вот мой медиа-запросы:

@media (max-width: 979px) { 

     .container.navbar-wrapper { 
     margin-bottom: 0; 
     width: auto; 
     } 
     .navbar-inner { 

     margin: 0px 0px -20px 0; 
     } 

     .carousel .item { 
     height: 300px; 
     } 
     .carousel img { 
     width: auto; 
     height: 300px; 
     } 

} 

@media (max-width: 767px) { 

     .carousel { 
     margin-left: -20px; 
     margin-right: -20px; 
     } 
     .carousel .container { 


     } 
     .carousel .item { 
     height: 350px; 

     } 
     .carousel img { 
     height: 350px; 

     } 


    } 

И только вы знаете, если это потребуется дополнительная помощь им, используя все бутстраповских активы как responsive.css, bootstrap.min.css и boostrap.css

Answer 1

Вы могли бы хотите проверить, есть ли где-нибудь (хотя бы один из загрузочных CSS-файлов) «минимальная высота». Min-height всегда переопределяет настройку максимальной высоты.

Answer 2

Я пытался найти работу для того же самого, когда я пришел на вашу проблему, и так или иначе, это очень помогло мне.

Что я делаю, это использовать медиа-запросы, как вы это делали, и определять высоту для внутренней карусели с максимальной или минимальной шириной. Кстати, я использую BS3 и карусель имеет функцию .img реагирующего() так:

> .item { 
display: none; 
position: relative; 
.transition(.6s ease-in-out left); 
// Account for jankitude on images 
> img, 
> a > img { 
    .img-responsive(); 
    line-height: 1; 
} 
} 

Эта часть, кажется, справиться с проблемой изменения размера изображения.

Answer 3

Не добавлять высоту исправить, сделать высоту авто, как этот

.carousel .item { высота: авто;

} 

.carousel img { 
     position: absolute; 
     top: 0; 
     left: 0; 
     min-width: 100%; 
     height: auto; 
} 

Answer 4

Lad, попробуйте эти линии. Они решили проблему для меня.

.carousel .item { 
    margin: 0 auto; 
     min-height: 300px; 
    } 

.carousel-img { 
    margin: 0 auto; 
    min-height: 300px; 
} 

Я не знаю о вас, но для меня, проблема заключалась в том, что мои вещи и образы внутри него, не было мин-высота.