web-dev-qa-db-fra.com

Comment rendre l'image de carrousel bootstrap sensible?

Je veux garder le même ratio des images. Le problème, c’est qu’il s’étire lorsque le navigateur est large ..__ et s’effondre dès qu’il est réduit.

J'ai vérifié toutes les SO questions ici, mais la plupart d'entre elles ne m'ont pas aidée.

Voici le balisage:

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/female/IMG_5053-2.jpg" 
           data-src="images/female/IMG_5053-2.jpg" alt="First slide">

et voici le CSS

.carousel .item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}

J'ai essayé de faire un jsfiddle mais je ne pouvais pas voici le lien vers la page http://maanastore.com/home.php

htmlcsstwitter-bootstraptwitter-bootstrap-3
16
user3205189

Supprimez les règles CSS suivantes des fichiers respectifs:

Dans le fichier home.php

.carousel .item>img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: 100%;
}

dans carrousel.css

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

Ajoutez également margin-top: 51px; à .carousel classe dans le fichier carousel.css et supprimez height:500px de la même classe, car vous avez corrigé la barre de navigation.

11
Ravimallya

J'ai trouvé le mieux pour supprimer ce qui suit.

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

et dans .carousel supprimer:

height: 500px;

et dans . carrousel .item remove

 height: 500px;

pour moi, cela a permis à l'image de fonctionner comme je le voulais, mais veillez à insérer une image dans votre code HTML au préalable, sinon je pense qu'elle s'effondrera dans le néant si vous travaillez localement.

modifier: Un autre utilisateur m'a suggéré d'ajouter ceci
S'il vous plaît noter que si l'image montre des barres grises d'un côté ou même d'un côté, je vous recommande de garder

.carousel-inner > .item > img {
    min-width: 100%;
}
6
Cameron

ce que j’ai fini par faire, c’était d’ajouter une div à l’intérieur du fond d’image de la div en tant que responsive

<div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <div class="img1">
        </div>
<!--<img class=" imgCstm " src="images/home/bng_00.jpg" alt="First slide">-->
    </div> 
</div> 


<style>
  .carousel-inner { 
     height: 100vh;
     <! --  custom hight -->
  }

  .carousel-item  { 
     height: 100%;
  }

  .img1 {
     background-image: url('../images/home/bng_00.jpg');
     height: 100%;
     width: 100%;
     background-repeat: no-repeat;
     background-attachment: fixed !important;
     background-size: cover !important;   
     background-position: center !important;
    }
</style>
1
oldman

Vous pouvez faire un usage typique de margin , pour améliorer votre résultat en centrant votre image. 

.carousel-inner > .carousel-item > img {
margin: 0; //If you have images of very different sizes.    
max-width: 100%; }
0
T0N1

J'ai fait cet ajustement à bootstrap.css aux lignes 5835 - 5847:

.carousel-inner {
  position: relative;
  /* Removed height here */
  overflow: hidden;
}

.carousel-item {
  position: relative;
  width: 100vh;
  height: 100vh;
  display: none;
  width: 100%;
}

Travaillé comme un champion!

0
gvbaker55