bootstrap旋轉木馬圖像高度

Question

我在bootstrap v4圖像旋轉木馬中的圖像有一些問題。如果我縮小瀏覽器寬度，圖像的高度保持不變，但圖像的寬度變小，圖像在高度上變得非常伸展。

我一直在尋找類似的線程在這裏stackoverflow和嘗試我發現在評論中的一切，但它仍然無法正常工作。所以我決定對此做一個新的線索。

這裏是一個codepen鏈接https://codepen.io/anon/pen/owNyyx，但我在這裏粘貼代碼太多，如果你不希望參觀codepen :)

因此，這裏是我的代碼有

<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

這是因爲IMG父，.carousel-item是display: flex和img是一個彈性子項，所以它通過父項上的默認align-items: stretch「拉伸」。

有很多方法可以解決這個問題。最簡單的可能是給align-items以外的值stretch。

或者如果您不想應用自定義CSS並將更改保留在標記中，請將每個img包裝在div或figure或任何適用於您的網站的塊元素中。

.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>