如何使div与CSS匹配图像高度 [英] How to make div to match image height with CSS

问题描述

继js小提琴 http://jsfiddle.net/9pn8Z/5/ 包含我目前正在处理的元素。这是页面布局的一部分，它将与不同的图像重复。虽然图像的宽度是固定的，高度不同，我有问题。元素将以几个宽度之一出现，高度将根据源图像的大小而变化。

Following js fiddle http://jsfiddle.net/9pn8Z/5/ contains element I'm currently working on. This is part of page layout, it will be duplicated with diffrent images. While width of image is fixed, height varies and i got problem with that. Element will come in one of few widths, height would vary depending on size of source image.

我的目标是创建 rt_tileoverlay div的高度，当图像被放置时，幻灯片放在图像高度相同的位置。我想避免使用JavaScript，只是坚持CSS

My goal is to make height of rt_tileoverlay div, that slides on when image is hovered same as height of image. I would like to avoid javascript and just stick to css

这是我的代码：

Here is My code:

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

非常感谢您提出解决问题的建议。

Thanks in adavnce for your suggestions for how to solve it.

推荐答案

您需要设置 rt_tileoverlay 的相对父级以获取完整高度：

You need to set the relative parent of the rt_tileoverlay to take the full height:

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

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

The demo http://jsfiddle.net/9pn8Z/6/

这篇关于如何使div与CSS匹配图像高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！