根據內部圖像調整元素高度的大小

Question

我試圖找出如何根據其中img元素的大小定義此.gallery元素的高度。

<div class="row"> 
     <div class="large-10 columns"> 
      <div class="gallery portrait"> 
       <div class="cover"> 
        <img src="http://placekitten.com/800/1029"> 
       </div> 
       <ul class="thumbs"> 
        <li class="thumb"></li> 
        <li class="thumb"></li> 
        <li class="thumb"></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

我使用基於百分比的高度和寬度在我的CSS設置我的畫廊裏的元素的高度和寬度。但是，我以像素爲單位定義了元素的高度，因此我的百分比元素可以工作。

.gallery { 
    height: 680px; 
} 

我試圖讓.gallery的高度來調整自身時調整瀏覽器窗口和我的形象變得更小。

我已經得到了我在這裏對這個問題的演示：http://codepen.io/realph/pen/kKAmx

任何幫助表示讚賞。提前致謝！

Answer 1

如果我理解您的問題正確，那麼只需刪除您的畫廊中的height:條目並覆蓋課程。 gallery元素應擴展合約以適合圖像（只要圖像具有％寬度）。

Example Fiddle

CSS：

.gallery { 
background: orange; 
width: 100%; 
float: left; 
//height: 680px; 
} 

.cover { 
    float: right; 
    width: 63.8554217%; 
    //height: 680px; 
    overflow: hidden; 
} 

.gallery img { 
    width: 50%; 
}