Twitter Bootstrap - Image et Carrousel Responsive

Question

J'utilise la dernière version du bootstrap Twitter. J'utilise également le fichier bootstrap-responsive.css. Je souhaite avoir une image (comme un cadre photo), et un carrousel (un fourni avec le bootstrap) dans le centre de cette image. Cependant, je souhaite qu'ils soient redimensionnés de manière responsive.

La manière typique que j'aurais fait ceci est, pour faire le carrousel avoir la position: relative, et le chevauchement simple sur l'image. Mais avec le redimensionnement actif, cela entraîne des problèmes.

Tout nouveau sur toutes les questions relatives aux médias avec css, avez-vous des idées sur la façon dont cela peut être réalisé?

Answer 1

Ce que je l'ai fait pour faire un site en utilisant le carrousel d'amorçage est ...

<div id = "myCarousel" class = "carousel slide"> 
     <div class = "carousel-inner"> 
      <!--each slide goes here--> 
      <div class = "item active"> 
        <img src = "your image here..." class = "img-responsive"> 
      </div><!--end itemactive--> 
      <div class = "item"> 
        <img src = "your image here..." class = "img-responsive"> 
      </div><!--end itemactive--> 
      <!--etc--> 
     </div><!--end carousel-inner--> 
</div><!--end carouselslide--> 

Ensuite, dans le CSS, je l'aurais

#myCarousel 
{ 
    background-image:url(your background image path here); 
} 

#myCarousel.carousel-inner 
{ 
    width: 80%; /*carousel width size here - my example will use 80%, if you want the carousel to fill entire screen, then just remove this width element.*/ 
    margin-left: auto; 
    margin-right: auto; 
    /*These two margins are to center the carousel if you set a smaller width. :) */ 
} 

je l'bootstrap.min.css par le façon.