Question

这似乎是一个非常基本的问题，但不管我怎么说，我似乎找不到任何能为我找到解决方案的人。

我有一个图像设置大小以适合我的布局并保持其宽高比，如下所示：

img{
   width:50%;
   height:auto;
}

由于我不知道图像的高度，我必须使用图像的实际高度（通过自动调整大小的大小）来计算另一个元素的位置。

$("img").height();

但是，无论何时将其设置为auto，都会返回0。我错过了什么？或者如何找到设置为auto的图像的当前高度：）？

谢谢！

Answer 1

在vanilla JavaScript中：

element.offsetHeight;

要获得正确的值，请确保您的图片已加载。为此，请通过JS使用load window事件或preload您的图片。不在jQuery中使用DOMContentLoaded或document的{{1}}事件。

Answer 2

您可能在使用document ready时使用“load event”事件。在图像在浏览器中呈现之前，您无法检索图像的尺寸。

$(window).load(function() {
    $(window).resize(function() {
        console.log('Height: ' + $('img').height());
    }).resize();
});

img {
    width: 50%;
    height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://lorempixel.com/200/200" height="200" width="200">

Answer 3

我认为这会有所帮助：

document.defaultView.getComputedStyle(document.querySelector("selector")).height;

它返回一个字符串，其实际高度为px。

Answer 4

我的建议是：

＆＃13;

$(function () {

  // in jQuery you can use: 
  var h = $("img").height();
  console.log('$("img").height() is: ' + h);
  console.log('$("img").css("height") is: ' + $("img").css("height"));
  

  // in javascript, with the unit measure:
  // This form corresponds to the second jQuery method
  var elem = document.querySelectorAll('img')[0];
  var h1 = window.getComputedStyle(elem).height;
  console.log('window.getComputedStyle(elem).height is: ' + h1);
});

＆＃13;

img{
  width:50%;
  height:auto;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<img src="https://www.google.it/logos/doodles/2016/karl-landsteiners-148th-birthday-5693101206142976-res.png">

＆＃13;

获取设置为“auto”的对象的实际高度

4 个答案: