HTML et CSS Hauteur automatique ne fonctionne pas correctement

Question

J'ai un carrousel avec des images/descriptions et ma taille: auto ne fonctionne pas correctement. Hauteur calculée est trop grand

JSBin: JSBin

Je ne peux que deviner que ce soit parce que ma classe .shadow qui est relatif à hauteur 150px.

Regardez s'il vous plaît.

Edit: code comme demandé

C'est le résultat d'un élément de carrousel

<div class="carousel2"> 
    <div class="carousel"> 
     <div class="owl-carousel owl-theme" id="owl-example" style= 
     "opacity: 1; display: block;"> 
      <div class="owl-wrapper-outer"> 
       <div class="owl-wrapper" style= 
       "width: 4092px; left: 0px; display: block; -webkit-transform: translate3d(0px, 0px, 0px); -webkit-transition: all 200ms ease; transition: all 200ms ease;"> 
       <div class="owl-item" style="width: 341px;"> 
         <div class="pc"> 
          <div class="c"> 
           <img alt="image" src= 
           "http://www.ramp-alberta.org/_system/ThumbnailCache/UserFilesImageAug~16~Site~1_004jpg.300.-1.-1108757834.jpg"> 

           <div class="shadow"> 
            <div class="description"> 
             Event1 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Et voici mon css

.carousel2 
{ 
    overflow: hidden; 
    /* height:400px; */ 
    background-color: #344754; 
} 

.carousel 
{ 
    width: 1364px; 
    float: left; 
    height: auto; 
} 

.shadow 
{ 
    position: relative; 
    bottom: 150px; 
    left: 0; 
    right: 0; 
    background: rgba(222,103,21,0.7); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#B2344855', endColorstr='#B2344855'); 
    height: 150px; 
    vertical-align: middle; 
    z-index: 1; 
    width: 100%; 
    text-align: center; 
} 

.pc{ 
    /* border: blue 1px solid; */ 
    width: 1%; 
    display: table; 
    margin: auto; 
    height: auto; 
    overflow: hidden; 
} 

.c 
{ 
    overflow: hidden; 
} 

.description 
{ 
    padding-top: 15px; 
    font-family: "FSRufus"; 
    font-size: 30px; 
    font-weight: bold; 
    color: white; 
} 

.owl-item 
{ 
    overflow: hidden; 
} 

Answer 1

Vous devez donner la classe carousel2 un min-height si ce CSS va savoir jusqu'à ce qu'il faut pour l'échelle de l'image. Essayez d'utiliser des images de taille exacte pour gagner du temps de traitement. Supprime également la hauteur de la classe Ombre. Cela devrait aider.