Hello, iange87!
Thank you for your reply! I will use the original carousel.html-example of Twitter Bootstrap<http://twitter.github.io/bootstrap/examples/carousel.html>, because the same problem occurs there as well. But first of all answering your question: no, the carousel doesn't seem to be placed in a span*: (...) <!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="../assets/img/examples/slide-01.jpg" alt=""> <div class="container"> <div class="carousel-caption"> <h1>Example headline.</h1> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a class="btn btn-large btn-primary" href="#">Sign up today</a> </div> </div> </div> <div class="item"> <img src="../assets/img/examples/slide-02.jpg" alt=""> <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a class="btn btn-large btn-primary" href="#">Learn more</a> </div> </div> </div> <div class="item"> <img src="../assets/img/examples/slide-03.jpg" alt=""> <div class="container"> <div class="carousel-caption"> <h1>One more for good measure.</h1> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a class="btn btn-large btn-primary" href="#">Browse gallery</a> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div><!-- /.carousel --> (...) The carousel behave also responsive: it takes the whole width of the browser (due to the 100% min-width?!): (...) /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { margin-bottom: 60px; } .carousel .container { position: relative; z-index: 9; } .carousel-control { height: 80px; margin-top: 0; font-size: 120px; text-shadow: 0 1px 1px rgba(0,0,0,.4); background-color: transparent; border: 0; z-index: 10; } .carousel .item { height: 500px; } .carousel img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; } .carousel-caption { background-color: transparent; position: static; max-width: 550px; padding: 0 20px; margin-top: 200px; } .carousel-caption h1, .carousel-caption .lead { margin: 0; line-height: 1.25; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); } .carousel-caption .btn { margin-top: 10px; } (...) and changes the height according to the media-queries: (...) /* RESPONSIVE CSS -------------------------------------------------- */ @media (max-width: 979px) { .container.navbar-wrapper { margin-bottom: 0; width: auto; } .navbar-inner { border-radius: 0; margin: -20px 0; } .carousel .item { height: 500px; } .carousel img { width: auto; height: 500px; } .featurette { height: auto; padding: 0; } .featurette-image.pull-left, .featurette-image.pull-right { display: block; float: none; max-width: 40%; margin: 0 auto 20px; } } @media (max-width: 767px) { .navbar-inner { margin: -20px; } .carousel { margin-left: -20px; margin-right: -20px; } .carousel .container { } .carousel .item { height: 300px; } .carousel img { height: 300px; } .carousel-caption { width: 65%; padding: 0 70px; margin-top: 100px; } .carousel-caption h1 { font-size: 30px; } .carousel-caption .lead, .carousel-caption .btn { font-size: 18px; } .marketing .span4 + .span4 { margin-top: 40px; } .featurette-heading { font-size: 30px; } .featurette .lead { font-size: 18px; line-height: 1.5; } } (...) I think that my problem - the slides doesn't preserve the aspect ratio - relate to .carousel img. What I would like is to have the original slides dimensions above 979px (i.a. 1500x550px in carousel.html-example OR - according to the height: 550px above 1500 x 550 / 500 = 1650 width) and proportional reduced for the height: 300px below 767px (that means a width of 1500 x 300 / 550 = 818px width). This would bring a question about the 100% width of the carousel... but I would rather have a smaller-than-100%-width than not proportional changed images in the carousel (*who want not proportional images anyway?!*). Does this make sense?! :-) Thank again! Kind regards, Vlad Am Dienstag, 2. Juli 2013 18:10:47 UTC+2 schrieb iange87: > > Hi Vlad > > Is your carousel inside a span* (ie span6, span9 etc? These have set > widths which the images have to fit inside. > > On Monday, 1 July 2013 04:09:10 UTC+1, Vlad Ghitulescu wrote: >> >> Hello again! >> >> >> I've replaced the (stupid ;-) *width=1550px; height=550px; / **width=100%; >> height=auto** *with *width="1550" height="550" *and correspondently >> *width="100%" >> height="auto" *but this didn't help either :-( >> >> >> Regards, >> Vlad >> >> >> Am Sonntag, 30. Juni 2013 19:57:25 UTC+2 schrieb Vlad Ghitulescu: >>> >>> Hello! >>> >>> >>> I have a problem using Twitter Bootstrap's carousel in the current >>> version 2.3.2: my images are not resized proportionally, even including >>> >>> a) the original width & height >>> >>> or >>> >>> b) width=100% & height=auto >>> >>> <!-- Carousel >>> ================================================== --> >>> <div id="myCarousel" class="carousel slide"> >>> <div class="carousel-inner"> >>> >>> <div class="item active"> >>> <img *width=1550px; height=550px;* src="./image1.png" alt=""> >>> <div class="container"> >>> <div class="carousel-caption"> >>> <h1>Slide 1</h1> >>> <p class="lead">Cras justo odio, dapibus ac facilisis in, >>> egestas eget quam. </p> >>> <a class="btn btn-large btn-primary" href="#s1">more >>> »</a> >>> </div> >>> </div> >>> </div> >>> >>> <div class="item"> >>> <img *width=100%; height=auto;* src="./image2.png" alt=""> >>> <div class="container"> >>> <div class="carousel-caption"> >>> <h1>Slide 2</h1> >>> <p class="lead">Cras justo odio, dapibus ac facilisis in, >>> egestas eget quam. </p> >>> <a class="btn btn-large btn-primary" href="#s1">Mehr >>> »</a> >>> </div> >>> </div> >>> </div> >>> </div> >>> >>> <a class="left carousel-control" href="#myCarousel" >>> data-slide="prev">‹</a> >>> <a class="right carousel-control" href="#myCarousel" >>> data-slide="next">›</a> >>> </div><!-- /.carousel --> >>> >>> What do I do wrong? >>> >>> Thank you! >>> >>> >>> Kind regards, >>> Vlad Ghitulescu >>> >> -- You received this message because you are subscribed to the Google Groups "twitter-bootstrap" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/groups/opt_out.
