Question

我正在尝试获取图像的动态高度，以将相应的css添加到它的父div和另一个div之后。

我的js目前看起来像这样：

  $(".imgContainer img").load(function(){
      var imageHeight = $(this).height();
      console.log(imageHeight);
      $(".parentDiv").css('min-height',imageHeight);
      $(".parentDiv .anotherDiv").css('height',imageHeight);
  });

  $(window).resize(function() {
      var imageHeight = $(".imgContainer img").height();
      $(".parentDiv").css('min-height',imageHeight);
      $(".parentDiv .anotherDiv").css('height',imageHeight);
  });

但是：每2到3倍的高度是不对的或没有正确加载。这意味着我没有在变量中获得img高度之前我可以通过css添加它。我在我的控制台中只是错误的值。

它始终适用于调整大小。

以防万一，这是我的HTML：

<div class="parentDiv">
    <div class="imgContainer">
        <img src="test.jpg" />
    </div>
    <div class="anotherDiv"></div>
</div>

感谢您的帮助。卡拉

Answer 1

问题似乎是由.load()方法造成的。

我做了这个fiddle并且它正在工作。

注意：.load()已弃用，请参阅this

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：

它不能始终如一地工作，也不能可靠地跨浏览器它不会   如果图像src设置为与src相同，则在WebKit中正确触发   在它没有正确冒泡DOM树之前可以停止射击   对于已经存在于浏览器缓存中的图像

使用.on("load", function)代替.load(function)，例如关注：

$(".imgContainer img").on("load",function(){
      var imageHeight = $(this).height();
      $(".parentDiv").css('min-height',imageHeight);
      $(".parentDiv .anotherDiv").css('height',imageHeight);
      $(".result").html("Image height: " + imageHeight);
  });

我希望它可以帮到你。再见

获取图像高度以计算外部div的高度

1 个答案: