0

所以这正在杀死我。

我查看了很多论坛，但似乎无法找到任何可行的解决方案。

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

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

我尝试将它们全部包装在一个 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;
}
4

1 回答 1

0

要获得父级的大小，您可以使用空白.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) */   
        });
   });
});
于 2015-09-02T14:51:48.330 回答