Как сделать div для соответствия высоте изображения с помощью CSS

Question

После js fiddle http://jsfiddle.net/9pn8Z/5/ содержит элемент, над которым я сейчас работаю. Это часть макета страницы, она будет дублироваться с помощью различных изображений. Хотя ширина изображения фиксирована, высота изменяется, и у меня проблема с этим. Элемент будет иметь одну из нескольких ширины, высота будет варьироваться в зависимости от размера исходного изображения.

Моя цель состоит в том, чтобы сделать высоту rt_tileoverlay div, который скользит, когда изображение зависнет так же, как высота изображения. Я хотел бы избежать яваскрипт и просто придерживаться CSS

Вот мой код:

<div class="rt_tilewrap"> 
    <a href="www.google.com"> 
     <div class="rt_imgwrap"> 
      <div class="rt_tileoverlay"></div> 
      <img class="rt_timg" src="http://i.imgur.com/cepjcsGb.jpg" /> 
     </div> 
    </a> 
    <div class="rt_tiletext"> 
     <p>wards are focused oni wards are focused oni 
     wards ards are focused oni wards areds are focused oni 
     wards are focused oni wards are focused oni wards are 
     focused oni wards are focu wards are focused i .</p> 
    </div> 
</div> 


.rt_tilewrap { 
    padding: 10px; 
    display: inline-block; 
    text-align: left; 
    vertical-align: top; 
    background: rgba(22, 255, 22, 0.3); 
    width:355px; 
} 

.rt_tiletext { 
    padding: 5px 0 5px 0; 
    color: #666666; 
    float:left; 
    line-height: 1.1em; 
    text-align: justify; 
    display: block; 
    background:skyblue; 
} 

.rt_tiletext p{ 
    padding: 0; 
    margin: 0; 
} 

.rt_timg { 
    width: 100%; 
    height: auto; 
    display:block; 
    position: relative; 
    float:left; 
} 

.rt_imgwrap{ 
    overflow:hidden; 
} 

.rt_tileoverlay { 
    height: 100%; 
    width: 0; 
    color:white; 
    overflow:hidden; 
    position: absolute; 
    background-color: rgba(255, 255,0, 0.5); 
    transition: all 0.4s ease-in-out; 
    position: margin-top: 0px; 
    margin-left: 0px; 
    -webkit-transition: all .4s ease; 
    -moz-transition: all .4s ease; 
    -ms-transition: all .4s ease; 
    -o-transition: all .4s ease; 
    transition: all .4s ease; 
    z-index: 100; 
} 

.rt_imgwrap:hover > .rt_tileoverlay { 
    width:355px; 
} 

Спасибо adavnce для ваших предложений для того, как ее решить.

Answer 1

Вы должны установить относительный родительский rt_tileoverlay взять полный рост:

.rt_imgwrap{ 
    position:relative; 
    overflow:hidden; 
} 

Демонстрационная http://jsfiddle.net/9pn8Z/6/