Mein Karussell ändert Höhen, wenn das Bild geändert wird

Question

Ich benutze ein Bootstrap Karussell und stellen Sie seine Höhe und Breite und auch von Bildern, aber immer noch, wenn das Bild ändert sich die Höhe des Karussells ändert Gibt es keine Möglichkeit, auch wenn die Höhe Breite verändert die Seite des Karussells bleibt gleich?

<div id="imageDiv"> 
       <div id="productImages" class="carousel slide" data-ride="carousel"> 

        <ol class="carousel-indicators"> 
        <li data-target="#productImages" data-slide-to="0" class="active"></li> 
        <li data-target="#productImages" data-slide-to="1"></li> 
        <li data-target="#productImages" data-slide-to="2"></li> 
        <li data-target="#productImages" data-slide-to="3"></li> 
        </ol> 


        <div class="carousel-inner" role="listbox"> 
        <div class="item active"> 
         <img width="200" height="200" src="<?php echo image_check($product['product_image1']); ?>" alt="<?php echo $product['product_name']; ?>"> 
        </div> 

        <div class="item"> 
         <img width="200" height="200" src="<?php echo image_check($product['product_image2']); ?>" alt="<?php echo $product['product_name']; ?>"> 
        </div> 

        <div class="item"> 
         <img width="200" height="200" src="<?php echo image_check($product['product_image3']); ?>" alt="<?php echo $product['product_name']; ?>"> 
        </div> 

        <div class="item"> 
        <img width="200" height="200" src="<?php echo image_check($product['product_image4']); ?>" alt="<?php echo $product['product_name']; ?>"> 
        </div> 
        </div> 


        <a class="left carousel-control" href="#productImages" role="button" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
        </a> 
        <a class="right carousel-control" href="#productImages" role="button" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
        </a> 
       </div> 




       </div> 

<style> 
.productImages .carousel-indicators .carousel-inner 
       { 
        width: 200px; 
        height: 400px; 
       } 
</style> 

Answer 1

Was versuchen Sie damit?

.productImages .carousel-indicators .carousel-inner 
    { 
     width: 200px; 
     height: 400px; 
    } 

Denn das, was das ist Targeting .carousel-inner innerhalb von .carousel-indicators ist, die innerhalb von .productImages sind. Ich denke, du gehst ins Gegenteil. Wenn Sie versuchen, auf alle von ihnen zu zielen, versuchen Sie die ID/Klassen mit Kommas zu trennen. Auch .productImages sollte #productImages sein, weil es eine ID ist.

Answer 2

Ihre productImages ist ein id, kein class Sie in CSS-Targeting sind.

Und carousel-inner ist nicht innerhalb von carousel-indicators.

#productImages .carousel-inner 
{ 
    width: 200px; 
    height: 400px; 
}