Bootstrap Karussell Bildhöhe

Question

Ich habe ein paar Probleme mit den Bildern in Bootstrap V4 Bildkarussell. Wenn ich die Browserbreite verkleinere, bleibt die Höhe des Bildes gleich, aber die Breite des Bildes wird kleiner, so dass das Bild auf der Höhe sehr gestreckt wird.

Ich habe ähnliche Threads hier auf Stackoverflow untersucht und alles versucht, was ich in den Kommentaren gefunden habe, aber es funktioniert immer noch nicht. Also habe ich beschlossen, einen neuen Thread dazu zu schreiben. Hier

ist ein codepen Link https://codepen.io/anon/pen/owNyyx aber ich fügen Sie den Code auch hier, wenn Sie nicht besuchen wollen codepen :)

So, hier ist der Code ich habe

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
     <img class="d-block img-fluid" src="images/image1.png" alt="First slide"> 
     <div class="carousel-caption d-none d-md-block"> 
     <h3>Random Title for image1</h3> 
     <p>Random description1</p> 
     </div> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block img-fluid" src="images/image2.png" alt="Second slide"> 
     <div class="carousel-caption d-none d-md-block"> 
     <h3>Random title for image2</h3> 
     <p>Random description2</p> 
     </div> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block img-fluid" src="images/image3.png" alt="Third slide"> 
     <div class="carousel-caption d-none d-md-block"> 
     <h3>Random title for image3</h3> 
     <p>Random description3</p> 
     </div> 
    </div> 
    </div> 
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
    <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 

Answer 1

Es ist, weil der img Eltern , .carousel-item ist display: flex und die img ist ein Flex-Kind, also "Stretching" über die Standardeinstellung align-items: stretch auf dem Elternteil.

Eine Reihe von Möglichkeiten, wie Sie das beheben können. Am einfachsten ist es wahrscheinlich, align-items einen anderen Wert als stretch zu geben.

Oder, wenn Sie nicht benutzerdefinierte CSS anwenden möchten, und Ihre Änderungen in der Auszeichnungs zu halten, wickeln jedes img in einem Blockelement wie div oder figure oder was auch immer für Ihre Website funktioniert.

.carousel-item { 
 
    align-items: flex-start; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
 
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="carousel-item active"> 
 
     <img class="d-block img-fluid" src="http://www.adminhelp.pro/wp-content/uploads/2015/03/zadumalas_big_1900_600-1900x500.jpg" alt="First slide"> 
 
     <div class="carousel-caption d-none d-md-block"> 
 
     <h3>Cheap prizes for hairstyling</h3> 
 
     <p>Good prizes to style your hair</p> 
 
     </div> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img class="d-block img-fluid" src="http://brazenwoman.com/wp-content/uploads/2017/04/woman-morning-bathrobe-bathroom-1900x500.jpg" alt="Second slide"> 
 
     <div class="carousel-caption d-none d-md-block"> 
 
     <h3>3 Years of experience as Hairstylist</h3> 
 
     <p>Awesome results !</p> 
 
     </div> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img class="d-block img-fluid" src="http://a.mktgcdn.com/p/Xxjv2UCFqkM_Ltr-Z80ydlVyo6vPpf1nZ5iPlELyxyM/1900x500.jpg" alt="Third slide"> 
 
     <div class="carousel-caption d-none d-md-block"> 
 
     <h3>Some random caption text</h3> 
 
     <p>Some random description</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
 
    <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>