webentwicklung-frage-antwort-db.com.de

Bootstrap Karussellbreite und -höhe

Ich versuche ein bootstrap Karussell mit voller Breite für die Bilder (Breite: 100%) und einer festen Höhe zu machen, aber wenn ich die Breite auf 100% setze, nimmt die Höhe automatisch auch die 100%

Ich bin mir nicht sicher, ob das Problem in meinen Dateien liegt

 <div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
  <div class="active item">
    <%= image_tag "slider/slide-bg-1.jpg", class: "tales" %>
  </div>
  <div class="item">
    <%= image_tag "slider/slide-bg-2.jpg", class: "tales" %>
  </div>
  <div class="item"> 
    <%= image_tag "slider/slide-bg-3.jpg", class: "tales" %>
  </div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

und meine CSS-Datei

.tales {
  width: 100%;
  height: 200px;
}
37
Jorman Bustos

Versuchen Sie, es reaktionsfähig zu machen? Wenn ja, würde ich nur Folgendes empfehlen:

.tales {
  width: 100%;
}
.carousel-inner{
  width:100%;
  max-height: 200px !important;
}

Der beste Weg, um darauf zu reagieren, wäre jedoch die Verwendung von Medienabfragen wie den folgenden:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

Wenn Sie Bootstrap 4 Alpha verwenden und Sie einen Fehler mit der Höhe der Bilder in Chrom haben, habe ich eine Lösung: Die Dokumentation von bootstrap 4 sagt dies:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Third slide">
    </div>
  </div>
</div>

Lösung:

Die Lösung besteht darin, "div" mit der Klasse ".container" wie folgt um das Bild zu setzen:

<div class="carousel-item active">
  <div class="container">
    <img src="images/proyecto_0.png" alt="First slide" class="d-block img-fluid">
  </div>
</div>
9
hugotom

Ich empfehle folgendes für Bootstrap 3

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  min-height: 500px;    /* Set slide height here */

}
8
Chuck

Ich weiß, dass dies ein älterer Beitrag ist, aber Bootstrap lebt noch und macht Spaß!

Etwas anders als bei @ Eduardo musste ich Folgendes ändern:

#myCarousel.carousel.slide {
    width: 100%; 
    max-width: 400px; !important
}

Als ich nur .carousel-inner {}, das tatsächliche Bild hatte eine feste Größe, aber die Steuerelemente für Links/Rechts wurden nicht korrekt neben dem div angezeigt.

7
rws

Hey Leute, ich hatte das gleiche Problem.

meine Größe hat sich auf die ursprüngliche Größe geändert, während meine Folie nach links animiert wurde (auf einer reaktionsfähigen Website).

also habe ich es nur mit CSS behoben:

.carousel .item.left img{
    width: 100% !important;
}
3
David Chacon

Ich habe festgestellt, dass, wenn Sie nur die Höhe des Elements ändern möchten, das das Bild einnimmt, dies der Code ist, der hilft

.carousel-item { height: 600px !important; }

dadurch wird die Größe des Bilds jedoch nicht dynamisch. Das Bild wird einfach auf seine Größe zugeschnitten.

0