Question

我想要完成的是，当你将图像放在100％上时，它可以很好地相应地调整高度。我喜欢抓住那个高度并加工它。

<div id="view" style="width:950px;">
    <img src="1.png" />
</div>

图像为950x500像素。但是当我问视图$( '#view' ).height()高度是多少时，它会返回16像素。有谁知道为什么这样做？为什么不返回500像素，因为它是图像的大小。

Answer 1

您需要先加载图像。试试这个：

<!DOCTYPE HTML>
<html>
  <style>
    div { width: 950px; }
    img { width: 100%; }
  </style>
<body>
  <div>
    <img src="1.png">
  </div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript">
    $('img').load(function() {
      var height = $('div').height();
      console.log(height);
    });
  </script>
</body>
</html>

Answer 2

我有测试来提醒<Div>它的大小它返回有效值，返回图像的大小。

但是从您的代码$( 'view' ).height()我已更改为$( '#view' ).height();

这是我的代码，它正确返回。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        function loaded() {
            var height = $( '#view' ).height();

            alert(height);
        }
    </script>
  </head>
  <body onload="loaded();">
        <div id="view" style="width:950px;">
            <img src="Desert.jpg" />
        </div>

  </body>
</html>

Answer 3

请不要使用本地图片，您可以使用带有URL的图片，例如“http://www.veryued.org/wp-content/uploads/2012/02/less-online.png".

请仔细阅读jQuery API：

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


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

为什么自动高度不能用于图像？

3 个答案: