web-dev-qa-db-fra.com

Comment rendre les images sensibles dans Bootstrap Carousel?

Existe-t-il un moyen de rendre vos images dans le carrousel de bootstrap réactives avec une hauteur fixe? J'ai tout essayé. J'ai également utilisé img-responsive, et dans le CSS, j'ai tout essayé. 

Voici mon html

    <div class="item active">
      <img src="images/slide1.jpg" alt="First slide" class="img-responsive">
      <div class="container">
        <div class="carousel-caption" style="padding-bottom:90px;">
          <h1>Totes for all</h1>
          <p>Personalize your style</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
        </div><!-- /.carousel-caption -->
      </div><!-- /.container -->
    </div><!-- /.item -->

    <div class="item">
      <img src="images/slide2.png" alt="Second slide" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">
          <div class="caption_background">
          <h1>Pattern it</h1>
          <p>Choose your favorite</p>
          </div>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
        </div><!-- /.carousel-caption -->
      </div><!-- /.container -->
    </div><!-- /.item -->

  </div><!-- /.carousel-inner -->

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.myCarousel -->

Voici mon CSS

http://paste.ubuntu.com/7908633/

htmlcsstwitter-bootstrapcarousel
5
nattienatz

Tout d’abord, vous devez vérifier les installations fournies par Bootstrap, en particulier le système de grille et les utilitaires sensibles.

Bootstrap 3.2.0 - CSS

Ensuite, pour effectuer une bonne procédure de réactivité, la largeur et la hauteur doivent être redimensionnables, en fonction de la taille de l'écran actuelle.

En outre, vous pouvez trouver des questions connexes sur StackOverflow, par exemple:

Comment rendre l'image de bootstrap carousel sensible?

5
vdenotaris

Essayez ce jq, cela rend votre .carousel-inner en hauteur. mais rappelez-vous de lever votre barre de navigation, pied de page, etc. tous les autres éléments/hauteurs divs vous devez -.

function init_carousel() {
            H = +($(window).height() /* -height here  */); // or $('.carousel-inner') as you want ...
            $('.carousel-inner').css('height', H + 'px');
        }
        window.onload = init_carousel;
        init_carousel();
2
Daniel Leth

Essayez ceci bootsniphttp://bootsnipp.com/snippets/featured/simple-responsive-carousel . Ceci est un bon site Web pour certains copier-coller utiles snippets pour bootstrap.

1
Akash

Je sais que c'est un peu tard pour la fête, mais j'ai récemment eu ce problème et je l'ai surmonté en attribuant à chaque élément son propre identifiant, puis en définissant les images sur les éléments comme images d'arrière-plan dans CSS.

<div id="header-carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div id="cazza1" class="item active">
    </div>
    <div id="cazza2" class="item">
    </div>
    <div id="cazza3" class="item">
    </div>
  </div>
</div>

Et le CSS:

#header-carousel {
  height: 240px;
}#cazza1 {
  height: 240px;
  background-image: url(/images/header1.jpg);
  background-position: center center;
  background-size: cover;
}#cazza2 {
  height: 240px;
  background-image: url(/images/header2.jpg);
  background-position: center center;
  background-size: cover;
}#cazza3 {
  height: 240px;
  background-image: url(/images/header3.jpg);
  background-position: center center;
  background-size: cover;
}
0
Andy Jacko