bootstrap carousel image отзывчивый, но контейнер/элемент не

У меня есть загрузочный карусель, и изображение правильно изменено, когда окно сделано меньше. Тем не менее, окружающий контейнер остается той же самой высоты, когда он был большим.bootstrap carousel image отзывчивый, но контейнер/элемент не

Это потому, что у меня высота: 380 пикселей в .item css и max-height: 380px в классе .carousel.

Любая попытка установить высоту: авто; или высота: 100%; который я ожидаю, может позволить изменять размер контейнера/элемента, приводит к тому, что изображение полностью исчезает.

Любые предложения здесь некоторые упрощенный код:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Carousel</title> 

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/carousel-SO.css" rel="stylesheet"> 
</head> 

<body> 
    <div class="container"> 

    <!-- Carousel --> 
    <div class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="http://tips4java.files.wordpress.com/2008/10/screen-image.jpg" /> 
     </div> 
     <div class="item"> 
      <img src="http://fineartamerica.com/images/contestlogos/logo1-best-uplifting-image.jpg" /> 
     </div> 
     <div class="item"> 
      <img src="http://www.nerd-age.com/wp-content/uploads/2011/11/Forge-Quest-featured-image.gif" /> 
     </div> 
    </div><!-- .carousel-inner --> 
    </div><!-- .carousel --> 
</div> <!-- /container --> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script> 
<script src="bootstrap/js/bootstrap.min.js"></script> 
<script> 
    $(document).ready(function(){ 
    $('.carousel').carousel({ 
     interval: 4000 
    }); 
    }); 
</script> 

</body> 
</html>

и вот CSS:

body { 
    color: #5A5A5A; 
    padding-top: 20px; 
    padding-bottom: 40px; 
} 

.carousel { 
    max-height: 380px; 
    max-width: 600px; 
    margin: 0 auto; 
} 

.carousel .item { 
    background-color: #777777; 
    width: 100%; 
    height: 380px; 
} 

.carousel-inner > .item > img { 
    float: none; 
    display: block; 
    margin-top: 40px; 
    height: auto; 
    top: 0; 
    position: absolute; 
}

Я в принципе хочу серую зону (.item) для изменения размера с изображением. Любая помощь приветствуется.

EDIT: Вот скрипку:

http://jsfiddle.net/7DGjk/

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

источник

2014-02-10 grooble

вы можете сделать jsfiddle – Selvamani

@ Selva Есть эта скрипка. – grooble

Да Возможно. Но не нужно писать слишком много кодов CSS для выравнивания. Здесь я использую padding и background Недвижимость для класса item. Здесь CSS

.item { 
    background: none repeat scroll 0 0 #808080; 
    padding: 5% 0; 
    max-width: 600px; 
}

здесь в jsfiddle.

источник

2014-02-11 05:36:34 Selvamani

Wow. Я даже не знаю, что происходит на этом фоне, но оно работает. Благодарю. – grooble

bootstrap carousel image отзывчивый, но контейнер/элемент не

ответ

Смежные вопросы