javascript - 使用 JS 使空容器与具有子图像的不同容器大小相同

Question

尺寸不正确：这是加载时的样子：

正确大小：这是调整窗口大小时的样子：

项目链接这里是一个参考链接：https ://wp.xingapps.win/

说明：将鼠标悬停在顶部导航中的“Shop Ejuice”黑色按钮上，您将看到红色框。这些红色框应该与第一张图像的高度匹配，但不是。

故事：我有一个问题，我试图减少页面上的图像请求数量。我有一个图像网格。而不是加载所有相同高度和宽度的图像，我只加载第一个图像，而不是其他图像将<div>与第一个图像的高度和宽度匹配。然后，我会将 CSS Sprite 背景图像应用到这些图像上，div以便它们显示为普通图像。这将大大减少页面上的请求数量！

问题：当我调整浏览器大小时，我的示例代码可以正常工作 - 它将完美匹配源图像的高度。但是在初始加载时，高度和宽度不正确。由于某种原因，它比它应该的要小一些。直到我调整窗口大小才修复。我该如何解决？

编码：

(function($){
/* Match Quad Menu Div Height to one image */
var imgContainer = $('.mad-hat-parent-menu .quadmenu-product-float'),
    sourceImg = $('li#menu-item-15959 span.quadmenu-item-content');

function resizeDiv () {
    imgContainer.height(sourceImg.width());
    imgContainer.width(sourceImg.width());
}

$(window).on("load resize", function() { resizeDiv(); });

})(jQuery);

注意：（我实际上是针对第一个图像的容器而不是图像本身）

此外，如果您的屏幕宽度小于 1650px ，很难看出这个问题。

标签： javascriptjquery

Answer 1

编辑：当用户打开/悬停/单击菜单时尝试使用 resizeDiv()，例如：

喜欢：

$(".quadmenu-dropdown-toggle").on({
    mouseenter: function (e) {
      resizeDiv();
    },
    click: function(){
      resizeDiv();
    }
});