CSS与父级高度相同答案

【问题标题】：CSS same height as ParentCSS与父级高度相同
【发布时间】：2015-03-20 18:40:40
【问题描述】：

所以我有一张需要hover 效果的图片；

HTML

 <div class="data">
    <img src="http://scontent-a-dfw.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10809512_341410899374744_4010362_n.jpg"/>

    <div class="overlay"></div>
 </div>

CSS

 .data {
    width: 100px; 
    margin: auto; 
    padding: 5px; 
    height: auto; 
 }
 img {
    width: 100%; 
 }
 .overlay {
    width: 100%; 
    height: ___?; 
    background-color: blue; 
 }

如您所见，.data 的高度与图像相同。我怎样才能使.overlay 与height 相同.data？

【问题讨论】：

标签： html css image height

【解决方案1】：

由于元素是叠加层（顾名思义），我建议相对定位父元素，然后将叠加层相对绝对定位到它：

Example Here

.data {
    width: 95%;
    margin: auto;
    position: relative;
}
.data .overlay {
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
}
.data:hover .overlay {
    background: rgba(0, 0, 0, .5);
}

【讨论】：