jquery根据图像大小设置div容器的高度和宽度答案

【问题标题】：jquery set div container height and width depending on image sizejquery根据图像大小设置div容器的高度和宽度
【发布时间】：2015-04-05 03:48:58
【问题描述】：

我需要根据 40 个项目列表中的第一个图像大小设置 div 高度和宽度（所有图像大小相同）。为了简短起见，该功能仅在您第一次加载页面时起作用，在访问其他页面后 imgSize 将是未定义的。

<div id="ulSorList"> 
  <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6 mix">
    <div class="portfolio-list">
      <a href="#">    
          <div class="overlay-block"></div>
          <img src="/img/1.jpg" class="img-responsive">
      </a>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6 mix">
    <div class="portfolio-list">
      <a href="#">    
          <div class="overlay-block"></div>
          <img src="/img/2.jpg" class="img-responsive">
      </a>
    </div>
  </div>
  ...
  ...
  ...
</div>

脚本

$("#ulSorList img:first").load(function() {
  imgSize = $(this);
  $(".portfolio-list a .overlay-block").width( imgSize.width()).height( imgSize.height() );
  alert(imgSize.width());
});

在您浏览网站（加载新页面）之前一切正常。

似乎脚本在某些时候中断了，所以我想我只需要获取第一个列表项的 img 大小。

我之所以编辑是因为我不知道可能是什么问题，所以问题的表述很糟糕。

没有什么我不能让它工作，现在看起来脚本没有破坏，至少我得到了 imgSize 宽度，但我仍然在同一个位置。导航后脚本无法运行。

有什么想法吗？

【问题讨论】：

你的意思是页面刷新的时候？你能更清楚地说明“浏览网站”对图像的影响吗？
我的意思是在单击任何菜单项后会加载一个新页面。刷新后一切正常
还要注意imgSize是未定义的，这可能是这里的主要问题吗？
只有在菜单项被右击时才定义？
不，总是未定义，即使一切似乎都正常

标签： jquery

【解决方案1】：

试试这个。

$("selector for menu"). on("click", function() {
    var imgSize= $(".portfolio-list a img");
    $(".portfolio-list a .overlay-block").width( imgSize.width()).height( imgSize.height() );
});

【讨论】：

【解决方案2】：

我想我解决了，可能不是最好的方法，但现在它可以工作了。问题是在导航之后，图像已经加载了 imgSize 正在返回它被放入容器之前的高度和宽度。我通过添加超时解决了这个问题。

【讨论】：

【解决方案3】：

您在 jquery 中使用锚标记，但它在 HTML 代码中的位置。这是一个错误。

$(".portfolio-list>img").load(function() {
var imgSize= $(this);
$(".portfolio-list>.overlay-block").width(imgSize.width()).height(imgSize.height());
});

【讨论】：