jquery - div 设置为 100% 宽度和 100% 高度，但不继承父 div 的大小

Question

我有一个父 div，里面有 div，我想将其设置为与父 div 相同的大小。父 div 设置为 inline-block。我怎样才能做到这一点？ https://jsfiddle.net/7twc7jy0/

<div class= "parent">
   <div class="caption">
      <h4>Thumbnail Headline</h4>
      <p>short thumbnail description</p>
   </div>
   <img class="project-img" src="https://i.imgur.com/UnxgcnT.png" >
</div>

CSS:

.project-img{
  width:400px;
  height: auto;
}

.parent{
  display:inline-block;
}

.caption {
    position:absolute;
    background:rgba(66, 139, 202, 0.75);
    height:100%;
    width:100%;
    padding:0%;
    margin:0%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

JS:

$('.parent').hover(
    function(){
        $(this).find('.caption').fadeIn(150)
    },
    function(){
        $(this).find('.caption').fadeOut(150); //.fadeOut(205)
    }
); 

Answer 1

您必须在父级 div 上添加相对位置

.proj{
  display:inline-block;
  position:relative;
}

这应该可以完成工作