Hi Vlad Hmm, not entirely sure I'm afraid! Have you got the code operating anywhere? Or, maybe you could put it into a JSFiddle <http://jsfiddle.net/MgcDU/>(this one has bootstrap ready to go)? My immediate reaction would be to try max-height, rather than height, though I'm not sure it'll help....
On Tuesday, 2 July 2013 22:52:26 UTC+1, Vlad Ghitulescu wrote: > > 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.
