bootstrap旋轉木馬圖像響應，但容器/項目不

我有引導傳送帶工作，並在縮小窗口時正確調整圖像大小。但是，周圍的容器保持與大時相同的高度。bootstrap旋轉木馬圖像響應，但容器/項目不

這是因爲我的高度：380px在.item css和max-height：380px在.carousel類中。

任何嘗試設置高度：auto;或身高：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）用圖片來調整。任何幫助表示讚賞。

編輯：這裏是一個小提琴：

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

哇。我甚至不知道在那個背景下發生了什麼，但它的工作原理。謝謝。 – grooble

bootstrap旋轉木馬圖像響應，但容器/項目不

回答

相關問題