Hello again, iange87, and thanks again for your help!
I have put the carousel on http://www.ghitulescu.de/test.html (I don't know JSFiddle :-(). The css is the same delivered with the whole ZIP, I've made only the font a little bigger. Thanks again, Vlad Am Donnerstag, 4. Juli 2013 20:21:36 UTC+2 schrieb iange87: > > 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.
