保持图像宽高比的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传送带

回答

相关问题