HTML＆CSS自動高度不能正常工作

Question

我有一個帶有圖像/描述的傳送帶和我的身高：自動無法正常工作。身高計算量太大

JSBin：JSBin

我只能猜測，這是因爲我的.shadow類，這是相對與高度150像素。

請看看它。

編輯：作爲請求的代碼

這是從傳送帶一個項目的結果

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

這裏是我的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

你應該給類carousel2一個最小高度等等該CSS將知道它需要縮放圖像。嘗試使用精確大小的圖像來節省處理時間。同時從類陰影中移除高度。這應該有所幫助。