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) */   
        });
   });
});

覆盖响应式图像

1 个答案: