Моя карусель меняет высоты при изменении изображения

Question

Я использую карусель для начальной загрузки и устанавливаю его высоту и ширину, а также изображения, но все же, когда изображение меняет высоту карусельных изменений. Есть ли способ, который даже если высота ширина изменилась сторона карусели остается той же?

<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; 
    } 

Потому что то, что это таргетирование .carousel-inner внутри .carousel-indicators, которые находятся внутри .productImages. Я думаю, вы идете наоборот. Если вы пытаетесь настроить таргетинг на всех из них, попробуйте разделить ID/классы запятыми. Также .productImages должен быть #productImages, потому что это идентификатор.

Answer 2

Ваш productImages является id, не class вы ориентируетесь в CSS.

И carousel-inner не находится внутри carousel-indicators.

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