CSS 与 Parent 身高相同

Question

所以我有一张图片需要 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 与 .data 相同的 height？

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

CSS 与 Parent 身高相同

CSS same height as Parent

html

css

image

height