wake-up-neo.net

Sorgen Sie dafür, dass das Bootstrap-Karussell auf die Höhe anspricht

Ich muss das BS-Karussell anpassen, damit die Bildgröße korrekt anpasst Ich brauche das Karussell, um die Höhe der aktiven Dias anzupassen. Initiel-Höhe. __ Wenn der Darstellungsbereich breiter ist als das Bild, wird das Bild/die Folie angezeigt sollte vergrößert werden, aber das Verhältnis beibehalten. Wenn das Ansichtsfenster kleiner ist, sollte das Bild verkleinert werden, das Verhältnis jedoch beibehalten.

Ich habe viele Variationen ausprobiert, kann aber nicht die richtige Lösung finden.

Ich hoffe, einige Css/Js-Experten können mir hier draußen helfen.

Hier ist mein aktuelles Markup:

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-pause="true">
      <!-- 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"><!--data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide"-->
          <img src="MediaContent/Images/Unika%20kobbertryk%201.jpg" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
            </div>
          </div>
        </div>
        <div class="item"> <!--data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" -->
          <img src="MediaContent/Images/Unika%20kobbertryk%202.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>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>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item"><!--data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide"-->
          <img src="MediaContent/Images/Unika%20kobbertryk%203.jpg"  alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p>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>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div><!-- /.carousel -->

Und hier ist mein aktuelles CSS, das funktioniert nicht wie heruntergekommen. Diese Version gibt mir eine feste Höhe von 500px und ein Bild, bei dem das Seitenverhältnis verloren geht, wenn der Darstellungsbereich kleiner als die Bildbreite ist.

/* GLOBAL STYLES

body {
  padding-bottom: 40px;
  color: #5a5a5a;
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
  padding-left: 0;
  padding-right: 0;
}
.navbar-wrapper .navbar {
  padding-left: 15px;
  padding-right: 15px;
}


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

/* Carousel base class */
.carousel {
  min-height: 500px;
  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 {
  min-height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 500px;
}



/* MARKETING CONTENT
-------------------------------------------------- */

/* Pad the edges of the mobile views a bit */
.marketing {
  padding-left: 15px;
  padding-right: 15px;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  text-align: center;
  margin-bottom: 20px;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-left: 10px;
  margin-right: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}



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

@media (min-width: 768px) {

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

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-left:  15px;
    padding-right: 15px;
  }
  .navbar-wrapper .navbar {
    padding-left:  0;
    padding-right: 0;
  }

  /* 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;
  }

  .featurette-heading {
    font-size: 50px;
  }

}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

Jede Hilfe geschätzt.

13
Depete

Ersetzen Sie im CSS-Selektor .carousel-inner > .item > imgmin-width durch width: 100%;.

.carousel-inner > .item > img {
  min-width: 100%;
  width: 100%;
}
7
negative0

Ich habe es korrigiert, indem den Bildern im Karussell eine Klasse hinzugefügt wurde, zum Beispiel:

<img class="fixed-height">

und in der css:

.fixed-height {
    max-height: 400px;
}
2
Lmaquer

Ich hatte das gleiche Problem wie oben. Hier ist meine Lösung. Ich habe ein paar CSS-Zeilen geändert: 

.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 {
  min-width: 100%;
  background-color: #fff;
}

.carousel-inner > .item > img {
  min-width: 100%;
  height: 100%;
}

Ich hoffe das hilft.

2
user3363454

Ich werde Sie nur verweisen, um die Klasse "img-responsive" in die Bild-Tags einzufügen. Und den Rest erledigt Bootstrap für Sie. 

Diese Klasse teilt dem Bootstrap mit, dass Sie die Bilder entsprechend der Bildschirmgröße skalieren möchten. 

<div class="carousel slide" id="theCarousel" data-interval="3000">
        <ol class="carousel-indicators">
        <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#theCarousel" data-slide-to="1"></li>
        <li data-target="#theCarousel" data-slide-to="2"></li>
        </ol>

            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar%201.JPG" alt="1" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">Resting In Style</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
                <div class="item ">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar%202.JPG" alt="2" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">The Dude Look</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
                <div class="item ">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar.JPG" alt="3" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">How z It??</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
            </div> 
        </div>          

Für weitere Details Hier habe ich einen Artikel, in dem dieser Artikel eingestuft wird. Sie können einen Blick darauf werfen, wenn Sie möchten 

Carousel Image Slider In Bootstrap 3

2
Tapan kumar

definieren Sie für jedes Gerät wie

@media (min-width: 360px) {
  .carousel {
    min-height: 140px;
   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 {
    min-height: 140px;
    background-color: #777;
    }
   .carousel-inner > .item > img {
    position: absolute;
   top: 0;
   left: 0;
   min-width: 100%;
   min-height: 140px;
  }


}
1
ikbal

Ich hatte das gleiche Problem, wenn ich die Klasse "img-responsive" in die Bild-Tags einfügte, die Bilder reagierten 

            <div class="carousel-inner">
            <div class="item active">
                <img src="/imahes/my-image.jpg" alt="1" class="img-responsive" />
                <div class="carousel-caption">
                     <h4 class="text-left">My caption</h4>

                </div>
            </div>

aber das Problem war mit der Höhe des Schiebereglers, also muss ich eine Medienabfrage hinzufügen, um die Größe des Steuerelements zu ändern

@media (max-width: 800px) {
.carousel-control{
  height:350px;
}
}

diese Medienanfrage ist nur ein Beispiel. Passen Sie sie an Ihre Bedürfnisse an. Ich hoffe, das hilft

0
Majali

Um Bilder auf einem Bootstrap-Karussell unterschiedlicher Größe zu verwenden und die folgenden Aktionen gleichzeitig auszuführen,

  1. Bildbreite auf Karussell = 100%
  2. Karussellbildhöhe = fixiert
  3. Behalten Sie das Bildverhältnis bei

Entfernen Sie dasimg-Tag und fügen Sie stattdessen eine neue Klasse hinzu. Sagen Sieslide1

<div class="item slide1">
  <div class="container">
    <div class="carousel-caption">
      <h1>Slide1 headline.</h1>
      <p>Slide content.</p>
    </div>
  </div>
</div> 

fügen Sie dann den folgenden CSS-Code fürslide1class hinzu,

.slide1{
    height: 500px;  /* your desired height for this slide */
    background: url(/img/your-img.jpg) no-repeat center center;
    background-size: cover;
}

Sie können diese Höhen auch für verschiedene Fenstergrößen konfigurieren. 

0
Arif Rahman