Comment rendre l'image du carrousel bootstrap sensible?

Je veux garder le même ratio de l'image. Le problème est qu'il s'étire lorsque le navigateur est large.
et squezes lorsqu'il est réduit.

J'ai vérifié toutes DONC, la question ici, mais la plupart d'entre eux ne m'aide pas.

Ici est la 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 pourrais pas voici le lien vers la page http://maanastore.com/home.php

source d'informationauteur

Supprimer les règles CSS de fichiers respectifs:

Dans home.php fichier

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

en manège.css

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

Également, ajouter margin-top: 51px; à .carousel classe dans le carrousel.fichier css et supprimer height:500px de la même classe, parce que vous avez fixé navbar.

5

J'ai trouvé qu'il est préférable de supprimer les éléments suivants.
```
.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}
```
et dans .carrousel supprimer:
```
height: 500px;
```
et dans
.carrousel .élément de supprimer
```
 height: 500px;
```
pour moi ce qui fait que l'image fonctionne comme je le voulais, mais assurez-vous d'insérer une image dans le html ou autre, je pense qu'il va juste s'effondrer dans le néant si vous travaillez en local.

edit: un Autre utilisateur m'a suggéré d'ajouter cette

s'il vous Plaît Noter que si l'image montre les barres grises sur les côtés ou même sur un côté, je vous recommande de garder
```
.carousel-inner > .item > img {
    min-width: 100%;
}
```

ce que j'ai fait était d'ajouter une div à l'intérieur puis l'image de fond de la div comme le 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>

Vous pouvez faire une utilisation typique de margepour améliorer vos résultats, le fait de centrer votre image.

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

J'ai fait ces 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!

Vous devez vous connecter pour publier un commentaire.