如何使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/