Javascript 覆盖在响应图像上

这真让我受不了

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

基本上，我有一个浮动元素的网格，每个元素都有一个悬停的缩略图，有一个覆盖图和该图库所包含内容的文本描述（这是一个典型的对开本网站）

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

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

---

要获得父级的大小，可以使用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) */   
        });
   });
});

---

我不太明白你对BLANK的意思。即使它给了我宽度和高度，我怎么才能得到mimc的覆盖呢？我尝试了jQuery，但在“height”行上出现了语法错误。非常感谢您的帮助错误说明了什么？正如我所说，空白png是一张透明的图片。如果你不能建立自己的搜索它通过谷歌，我相信你得到它。设置空白PNG至宽度100%的比例，也许高度为AUTO。让它可伸缩。嘿-我知道什么是png，如何制作png，我只是不知道一旦我得到了宽度和高度，我怎么会让子div匹配它。我真的解决了。给flex_one一个相对位置，.blackbox一个100%宽度和高度的绝对位置。好的，目前还不了解确切的问题，但如果它起作用：）

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