Bonsoir,

J'essaye depuis plusieurs jours de réaliser un carousel responsive en Bootstrap. 

C'est-à-dire que mes images soient responsive surtout, qu'elles soient adaptées à la height et la width de mon carousel container, sans être déformées. 

Cependant, mon image n'est pas du tout bien placée !

/*Réglons le carousel*/
.carousel-container {
    padding: 0;
}

.carousel,.item,.active {
    height:500px; 
    width:100%; 
    position: relative;

}
.carousel-inner {
    height:500px;
}

.fill {
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover; 
    margin: 0;
}

J'utiise ce CSS ci-dessus et l'HTML suivant : 

<!--Carousel Bootstrap-->
	<div class="container-fluid carousel-container">
		<div id="myCarousel" class="carousel slide">
  			<div class="carousel-inner">
    			<div class="active item">
      				<div class="fill img-responsive" style="background-image:url('../images/ipad.jpg');">
        				<div class="container">
          
        				</div>
      				</div>
    			</div>
    			<div class="item">
      				<div class="fill img-responsive" style="background-image:url('../images/paysage1.jpg');">
        				<div class="container">
          
        				</div>
      				</div>
    			</div>
    			<div class="item">
      				<div class="fill img-responsive" style="background-image:url('../images/coffee.jpg');">
        				<div class="container">
          
        				</div>
      				</div>
    			</div>
  			</div>
  			<div class="pull-center">
				<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
				<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
  			</div>
		</div>
	</div>

Mes images sont étirées, et pas moyen de trouver un css pour rendre que l'image s'adapte à la height et à la width de son container. 

Auriez-vous des pistes ? Ou des éléments de mon code pas adaptés ? 

Merci d'avance pour votre aide

Edit: Là mon image est "zoomé", j'ai le centre de l'image, mais pas le haut, ni le bas. 

-
Edité par Ikxway 17 novembre 2015 à 22:00:13

Bonjour,

Euuh pour un carousel moi j'aurais mis les images dans une balise <img /> et non en background de la div comme tu la fait.

Ensuite c'est simple tu fixe le width à "100%" de la div qui contient ton image et tu met height en "auto".

Bonjour,

Comme dit beign, le carousel de Bootstrap fonctionne mieux en mettant tes images en <img> et non en background. Ainsi, ton carousel prendra la taille de tes images, qui elle même seront responsive! Et le tout sera donc responsive puisque ton carousel sera dépendant des tes <img>

Si jamais tu as perdu le liens, tout es là : http://getbootstrap.com/javascript/#carousel Tu n'as rien à changer pour avoir ton carousel responsive, il l'es déjà en fonction des <img>

Bonjour, 

Merci de vos réponses tout d'abord, 

J'ai repris le carousel de Bootstrap via ton lien. Les images sont bien affichées, cependant, le carousel est un peu trop grand car je n'ai plus de css associé. 

Le problème, c'est comment garder les images telles qu'elles sont, en réduisant la taille du carousel bootstrap ? 

J'ai repris ce code là : 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img class="img-responsive" src="../images/ipad.jpg" alt="ipad">
                <div class="carousel-caption">
                    <h1>Notre Concept</h1>
                </div>
            </div>
            <div class="item">
                <img class="img-responsive" src="../images/paysage1.jpg" alt="paysage">
            </div>
        </div>

        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Précédent</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Suivant</span>
        </a>
    </div>

J'ai ce résultat là : 

http://www.cjoint.com/c/EKsrGBUDBm3

et j'aimerai avoir ce résultat : 

http://www.cjoint.com/c/EKsrK7z7yj3

Bonsoir,

Dans ma logique je te dirais d'ajouter ces 2 propriété à ton carousel

.carousel {               // class de ton carousel
    height: 200px;        // La hauteur voulu
    overflow: hidden;
}

.carousel img {
    width: 100%;
}

Mais bon j'en suis pas sur du résultat, teste ça et tien moi au courant.

-
Edité par being 18 novembre 2015 à 23:28:08