Bootstrap Karussell Bilder nicht gleich Höhe in der mobilen Ansicht

Question

Ich habe ein Bootstrap Karussell auf meiner Seite. Die Bilder, die ich benutze, haben alle unterschiedliche Höhen. Ich möchte, dass alle Bilder die gleiche Höhe haben. Dafür verwende ich

.carousel{ max-height: 1000px; overflow: hidden; } 

Ich weiß, es ist nicht perfekt, aber es funktioniert auf Desktop-Ansicht. Aber in der mobilen Ansicht hat es nicht funktioniert und die Bilder haben nicht die gleiche Höhe. Also wie kann ich erreichen, dass die Bilder in der mobilen Ansicht alle die gleiche Höhe haben? Ich hoffe, jemand kann mir helfen :) Danke.

, dass mein Karussell-Code ist:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
<!-- 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> 
    <li data-target="#myCarousel" data-slide-to="3"></li> 
</ol> 

<!-- Wrapper for slides --> 
<div class="carousel-inner"> 
    <div class="item active"> 
    <img src="./img/index/seo.png" alt="Los Angeles" style="width:100%;"> 
    </div> 

    <div class="item"> 
    <img src="./img/index/security.jpg" alt="Chicago" style="width:100%;"> 
    </div> 

    <div class="item"> 
    <img src="./img/index/sport.jpg" alt="New york" style="width:100%;"> 
    </div> 

    <div class="item"> 
    <img src="./img/index/service.png" alt="New york" style="width:100%;"> 
    </div> 
</div> 

<!-- Left and right controls --> 
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    <span class="sr-only">Previous</span> 
</a> 
<a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    <span class="sr-only">Next</span> 
</a> 
</div> 

Answer 1

Ich würde vorschlagen, Sie Höhe verwenden nicht max-height Owl Karussell reagiert, so dass es Breite ergänzt: zu jedem Bild auf den Bildschirm unabhängig von 100% -breite ist. und wahrscheinlich werden Ihre Bilder nicht die 1000px Höhe bekommen. Es wäre also besser, wenn Sie diesen Code hinzufügen.

@media only screen and (max-width: 576px) { 
    .carousel .carousel-inner .item{ 
     height: 100px // feel free to add the height you want to use but it's going to change the ratio of your image 
    } 
} 

Wenn Bilder nicht die gleiche Höhe ich es vorziehen, wenn man sich auf die div der Klassenposition als CSS-Eigenschaft background-image hinzufügen