覆盖响应图像

Question

所以这真让我丧命。

我看过很多论坛，但似乎找不到任何解决方案。

基本上，我有一个浮动元素的网格，每个元素都有一个缩略图图像，当鼠标悬停时，它们具有该画廊包含的内容的叠加层和文本描述（这是一个典型的作品集网站）。

通常，我只有一个固定的布局，即一个与每个图像大小相同的覆盖框和一个具有相同宽度的文本容器，可以在悬停时打开和关闭它，这很好。 但是-这是我对该网站的第一个响应版本，我不知道如何使覆盖图和文本的尺寸与其父级的尺寸匹配。

我尝试将它们全部包装在div中，但是子元素似乎仍然忽略父元素的尺寸-大概是因为它们是浮动的。

我使用的是fancybox相册，有问题的缩略图带有注释，但可以正常使用。

有没有办法告诉一个div匹配另一个响应img的宽度？ 任何帮助将非常感激。

这是我的html

<div class="flex_one">

   <div class="blackbox"><!--black low opacity box - appears on hover--></div>

   <div class="textcontainer"><h2>ART</h2></div> 

   <a class="fancybox-thumb" rel="gallery2" href="image1.jpg"><!--gallery image 1-->

   <img class="icon-image" src="thumb.jpg"  alt="main icon" /><!--This is the thumbnail image on page-->
</a>

   <a class="fancybox-thumb" rel="gallery2" href="image2.jpg"><!--gallery image 2-->
 </a>

这是我的CSS

.flex_one {
    width:28%;
    height:auto;    
    float:left;
    background-color:#000;
    overflow:hidden;
    margin-left:4%;
    margin-top:4%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .icon-image {
        width:100%;
        height:auto;
    }

    .blackbox {
        height:???;
        width:??;
        overflow:auto;
        opacity:0;
        background-color:#000;
        position: absolute;
        pointer-events:none;    
    }

    .textcontainer {
        width:??;
        margin-top:0px;
        height: 20px;
        background-color:rgba(0,0,0,0);
        pointer-events:none;
        position:absolute;
        background-color:transparent;
    }

    .textcontainer h2{
        text-decoration: none;
        font-size: 13px;
        font-family: 'Raleway', sans-serif; text-transform: uppercase;
        color:#FFF;
        z-index:80000;
        opacity:0;
        transform:scale(0);
    }

.flex_one:hover > .textcontainer h2 {
    transform:scale(1);
    opacity:1;
}

.flex_one:hover > .blackbox {
    opacity:.7;
}

Answer 1

要获取父级的大小，您可以使用blank.png，即将高度和宽度设置为100％的同一级别的透明图片。

否则，您可以像这样使用jQuery：

$(document).ready(function(){
   $('.blackbox').each(function(){
        $(this).css({
           "height" : $(this).parent('flex_one').outerHeight(); 
           /* or height, outerHeight(true) */
           "width" : $(this).parent('flex_one').outerWidth();
           /* or width, outerWidth(true) */   
        });
   });
});