保持圖像寬高比的Bootstrap傳送帶

我的網站上有一個引導傳送帶。我想在較小的屏幕上調整大小時保持圖像寬高比。這個怎麼做？保持圖像寬高比的Bootstrap傳送帶

下面是一些代碼：

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="img/bg_good_sex2.jpg" class="img-responsive" alt="verslaafd-aan-porno-goede-seks"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Sex Coach <span class="text-primary"> App 
      </span></h1> 
      <p>Krijg controle op porno- of seksverslaving</p> 
      <p><a href="<?php echo SSL_DOCUMENT_ROOT ?>/register.php" class="btn btn-lg btn-primary"><i class="icon-chevron-sign-right"></i> <?php echo START_BTN ?></a></p> 
      <p><a href="<?php echo SSL_DOCUMENT_ROOT ?>/survey_me.php" class="btn btn-success btn-primary btn-lg"><i class="icon-edit"></i> <?php echo BTN_SURVEY_ME ?></a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div><!-- /.carousel -->

謝謝弗雷德

來源

2013-12-15 Fred30

所描述的，你可以添加你轉盤的簡化版本，讀者可以幫助你使用精確的代碼相同的類。 – Jon

可能涉及：http://stackoverflow.com/questions/17290701/maintain-image-aspect-ratio-in-carousel –

@MikeCauser，這個解決方案有一個固定的500px高度。我希望容器的整個內容（圖像和文本）在較小的顯示器上縮小。 – Fred30

以下樣式添加到<img>。這將保持大型瀏覽器的縱橫比。

max-width: 100%; 
width: auto; 
height: auto; 
vertical-align: middle;

另一種選擇是使用<div>的背景圖像，並使用background-size: cover

來源

2013-12-15 11:39:25

我使用Chrome的開發工具嘗試了上面的回答和其他許多人沒有運氣，而是靠，我來了這個簡短的解決方案。希望這對你的作品還有：

/* Carousel image resize */ 
.carousel-inner > .item > a > img, .carousel-inner > .item > img { 
    width: 100%; 
}

其重要上面

來源

2015-05-06 04:23:46

保持圖像寬高比的Bootstrap傳送帶

回答

相關問題