Изменение размера элемента в зависимости от изображения Внутри

Question

Я пытаюсь выяснить, как определить высоту этого элемента .gallery на основе размера элемента img внутри него.

<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 в пикселях, чтобы мои процентные элементы работали.

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