如何在100％宽度的图像上定位div？

Question

我已经有很多方法可以做到这一点。但我还是不能。 我想在我的100％宽度图像上放置带有我的徽标的div或图像。当然，当窗口宽度和图像变化比这些蓝色区域之间的高度变化时。我希望我的徽标总是在那个高度的中间。

Answer 1

我认为你正在使用jQuery。

您应该对徽标div或img使用绝对定位，并根据100％图像的边界计算它的新位置。所以这样的事情应该符合你的目的。

$( window ).resize(function() {
   var container = $( "#your100percentimage" );
   var logo = $("#yourlogo");

   var containerWidth = container.width();
   var containerHeight = container.height();

   var logoHeight = logo.height();
   var logoY = container.offset().top + (containerHeight - logoHeight) / 2;

   logo.css("top", logoY+"px");
});

Answer 2

用div包裹img

div - 位置相对

img - 位置绝对顶部0左边0底部0右边0

logo - 位置绝对排在前50％???

<div><img/><logo/></div>