イメージが変更されたときにカルーセルの高さが変化する

Question

私はブートストラップカルーセルを使用していますが、画像の高さと幅を設定していますが、イメージが変わってもカルーセルの高さが変わる 高さ幅が変更されたカルーセルの側面は同じままですか？あなたのproductImages

<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

これで何をしようとしていますか？

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

何それがターゲットだが.productImagesの内側にある.carousel-indicatorsの内部.carousel-innerですので。私はあなたがその反対に行くと思う。すべてをターゲットにする場合は、ID /クラスをコンマで区切ってみてください。 .productImagesはIDなので#productImagesになります。

Answer 2

はid、ないあなたは、CSSでターゲットとしているclassです。

carousel-innerはcarousel-indicatorsの内部にありません。

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