Бутстрап-карусель, который поддерживает соотношение сторон изображения

У меня есть карусель на моем сайте. Я хочу сохранить соотношение сторон изображения при изменении размера на меньших экранах. Как это сделать?Бутстрап-карусель, который поддерживает соотношение сторон изображения

Вот код:

<!-- 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, это решение имеет фиксированную высоту 500 пикселей. Я хочу, чтобы весь контент (изображение и текст) контейнера уменьшался на меньших дисплеях. – Fred30

Добавьте следующие стили к <img>. Это позволит сохранить соотношение сторон в больших браузерах.

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

Другой вариант заключается в использовании <div> «S с фоновыми изображениями и использовать background-size: cover

источник

2013-12-15 11:39:25

Я попробовал ответ выше и многие другие без удачи, но с помощью инструментов разработки хром, я придумал с этим коротким решением. Надеюсь, что это работает для вас, а также:

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

Его важно использовать точный код с теми же классами, как описано выше

источник

2015-05-06 04:23:46

Бутстрап-карусель, который поддерживает соотношение сторон изображения

ответ

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