Jquery 将图元的位置/尺寸与其他图元的位置/尺寸相匹配

我正在处理一个布局，其中的图像将完全位于彼此的顶部，而每个图像都应该显示一个带有悬停文本的彩色框

由于我不知道图像的大小/比率，它们得到不同的最大宽度/最大高度值和不同的顶部/左侧/右侧/底部值。例如：

img {
    position: absolute;
}

img.1 {
    max-width: 80%;
    max-height: 74%;
    left: 8%;
    top: 11%;
}

img.2 {
    max-width: 88%;
    max-height: 82%;
    left: 4%;
    top: 7%;
}...

现在悬停时，每个图像应该在顶部显示一个带有彩色背景+文本的容器。点击图像+容器应该消失，显示下面的一个

我想我可以在img和info容器周围放一个包装器，而容器只会在hover上显示。但因此，父包装器必须采用图像的实际大小

<div class="wrapper">
    <img />
    <div class="info">Info</div>
</div>

另一种选择是让每个img后面跟着它的信息容器，它将获得与以前img相同的大小/位置

<img />
<div class="info">Info</div> <–– Somehow same size as previous img

有人知道如何用CSS+jQuery解决这个问题吗

---

谢谢

因此，对我来说最有效的方法是不将img包裹起来，并将其放置在位置：绝对位置和最大宽度/最大高度。每个图像后面都有要覆盖的项目。项目信息位置：绝对；排名：0；左：0

jQuery将每个.item信息更新为其各自先前img元素的大小和位置：

  function adjustItemInfo() {

    $(".thumbnail-class").each(function() {

      $(this).next().css({
        'height': $(this).height(),
        'width': $(this).width(),
        'top': $(this).css( "top" ),
        'left': $(this).css( "left" ),
        'bottom': $(this).css( "bottom" ),
        'right': $(this).css( "right" )
      })

    });

  }

  adjustItemInfo();

  $(window).resize(function(){
    adjustItemInfo();
  })

---

绝对定位将更改宽度传播到其父元素的方式。您可以在绝对定位的div中尝试相对定位的div，然后让非绝对img扩展相对div。这将导致相对div中后续div的宽度按您预期的方式运行。我在绝对包装中放置了一个包含img+info容器的相对包装，这仍然不考虑图像的大小。不是我真的不明白，就是它不能满足我的需要。难道我不能通过CSS将包装的大小设置为100%/100%，图像采用正确的最大宽度/最大高度，并使用jQuery将包装的大小调整为img的大小吗？您可以使用jQuery/JavaScript来实现这一点。至于使用CSS，请确保不要仅在外部div上使用img本身的绝对定位，并将img和Info div放置在绝对div内的相对div内。现在，我尝试为包装器提供一个绝对位置，具有不同的上/左值和100%高100%宽，为了使图像获得正确的大小最大宽度/高度。我把这个小jQuery放到它上面$'article.item'.css'height'，$this.childrenimg.height；，用于根据其子img调整包装的高度。但不幸的是，这一切都行不通。有没有人有更多的建议，我对此很困惑？！