2013-10-18 22 views
7

ho le seguenti desideri per un Twitter carosello di bootstrap:immagine twitter-bootstrap centro carosello reguardless delle dimensioni dello schermo

  1. Quando lo schermo è più grande poi giostra, voglio che l'immagine centrata.
  2. Quando lo schermo è più piccolo del carosello, voglio vedere solo PARTE dell'immagine. Questa parte dell'immagine dovrebbe essere centrata.
  3. In nessun caso le immagini devono essere ridimensionate o ridimensionate
  4. Le transizioni dovrebbero funzionare.

Il mio esempio di seguito risolto problemi 1-3 .. ma si rompe 4. Posso facilmente risolvere 4 se sono disposto a rompere 3, ma non va bene.

Bootply link per esempio: http://bootply.com/88542

HTML:

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide"> 
    <!-- 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="http://lorempixel.com/1200/600/abstract/1" height="600px" width="1200px"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Bootstrap 3 Carousel Layout</h1> 
      <pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small=""><p></p> 
      <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a> 
     </p></pthis></div> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://lorempixel.com/1200/600/abstract/2" height="600px" width="1200px"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Changes to the Grid</h1> 
      <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> 
      <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/1200X600" height="600px" width="1200px"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Percentage-based sizing</h1> 
      <p>With "mobile-first" there is now only one percentage-based grid.</p> 
      <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="icon-prev"></span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="icon-next"></span> 
    </a> 
</div> 
<!-- /.carousel --> 

CSS

/* BOOTSTRAP 3.x GLOBAL STYLES 
-------------------------------------------------- */ 
body { 
    padding-bottom: 40px; 
    color: #5a5a5a; 
} 



/* CUSTOMIZE THE CAROUSEL 
-------------------------------------------------- */ 

/* Carousel base class */ 
.carousel { 
    margin-bottom: 60px; 
} 
/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
    z-index: 10; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
    height: 600px; 
    width: 1200px; 
    background-color:#bbb; 
    left: 50%; 
    margin-left: -600px; 
} 
.carousel img { 
    position: absolute; 
    top: 0; 
} 



/* RESPONSIVE CSS 
-------------------------------------------------- */ 

@media (min-width: 768px) { 

    /* Remve the edge padding needed for mobile */ 
    .marketing { 
    padding-left: 0; 
    padding-right: 0; 
    } 

    /* Navbar positioning foo */ 
    .navbar-wrapper { 
    margin-top: 20px; 
    margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ 
    } 
    /* The navbar becomes detached from the top, so we round the corners */ 
    .navbar-wrapper .navbar { 
    border-radius: 4px; 
    } 

    /* Bump up size of carousel content */ 
    .carousel-caption p { 
    margin-bottom: 20px; 
    font-size: 21px; 
    line-height: 1.4; 
    } 

} 

risposta

10

Questo potrebbe aiutare se si desidera che l'immagine da ri-dimensionato in base alle dimensioni dello schermo del il dispositivo. Lo width = "100%" farà il lavoro.

<img src="http://lorempixel.com/1200/600/abstract/2" width = "100%"> 
2

aggiungere questo

.carousel .item img { 
    left: -9999px; /*important */ 
    right: -9999px; /*important */ 
    margin: 0 auto; /*important */ 
    max-width: none; /*important */ 
    min-width: 100%; 
    position: absolute; 
} 

E naturalmente uno dei div genitore deve avere una posizione: relativo, ma credo che lo fa di default.

vederlo qui: http://paginacrestinului.ro/

+0

Marchio anche 'min-width: none' per un tempo molto bello, non immagini tese sempre centrati. grazie @AdiCumpanasu – Fafaman

5

Basta aggiungere questo al vostro css:

.carousel-inner > .item > img, .carousel-inner > .item > a > img { 
    width: 100%; 
} 
Problemi correlati