如何使div與CSS匹配圖像高度

Question

以下js小提琴http://jsfiddle.net/9pn8Z/5/包含我目前正在處理的元素。 這是頁面布局的一部分，它將與不同的圖像重復。 雖然圖像的寬度是固定的，但高度變化，我遇到了問題。 元素將具有幾個寬度中的一個，高度將根據源圖像的大小而變化。

我的目標是使rt_tileoverlay div的高度在圖像懸停時與圖像高度相同時滑動。 我想避免使用javascript而只是堅持使用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;
}

非常感謝你提出如何解決它的建議。

Answer 1

您需要將rt_tileoverlay的相對父級設置為采用完整高度：

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

演示http://jsfiddle.net/9pn8Z/6/