HTML 및 CSS 자동 높이가 제대로 작동하지 않습니다.

Question

이미지/설명이 포함 된 회전 목마가 있으며 높이가 자동입니다. 자동으로 제대로 작동하지 않습니다. 계산 높이

JSBin 너무 큰 : JSBin

나는 단지이 있음을 추측 할 수 있기 때문에 높이를 150 픽셀로 상대 내 .shadow 클래스입니다.

한번보세요.

편집 : 요청에 따라 코드

이

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

그리고 여기 당신은 carousel2 A 최소 높이 그래서 클래스를 제공해야 내 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

이다 회전 목마에서 한 항목의 결과입니다 CSS는 이미지를 확장하는 데 필요한 것이 무엇인지 알 수 있습니다. 정확한 크기의 이미지를 사용하여 처리 시간을 절약하십시오. 또한 Shadow 클래스에서 높이를 제거합니다. 도움이 될 것입니다.