Question

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

因为我不知道图像＆＃39;尺寸/比率，它们具有不同的最大/最大/最大高度值，具有不同的上/左/右/下值。如：

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-container周围放置一个包装器，而容器只会在悬停时显示。但是，父包装器必须采用图像的实际大小。

<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？）解决这个问题吗？

谢谢！

Answer 1

所以，对我来说最好的方法是不包装img并将它们（position：absolute）与max-width / max-height放在一起。每个图像后跟（要叠加）.item-info（位置：绝对;顶部：0;左：0;）。

jQuery将每个.item-info更新为其各自（上一个）img-element的大小和位置：

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

使元素的位置/大小适合其他元素的位置/大小

1 个答案: