Question

我们有一个图像标签，其宽度和高度指定为auto，以便我们可以获得实际图像的宽度和高度。所以我们使用以下内容来获取它们。

$("img.list-image").width()
$("img.list-image").height()

在FF，Chrome，IE8和Safari中，返回的宽度和高度分别为125像素和160像素，这些值是正确的。但在IE9中，宽度为1519像素，高度为771像素。由于某些原因，这些宽度和高度函数在IE9中没有返回正确的值。任何帮助表示赞赏。

修改以下是我们正在使用的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Image Page</title>
    <style type="text/css" >
    .list-category-image
    {
        border-width: 0px;display:none;
    }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        //<![CDATA[

        $(function() {
            categoryImageaspectratio();
        });

        function categoryImageaspectratio() {
            $("img.list-category-image").one('load', function() {
                var width = 85.0, height = 85.0;
                var realWidth, realHeight;
                realWidth = $(this).width();   // Note: $(this).width() will not
                realHeight = $(this).height();

                //alert("width, height = (" + realWidth + "," + realHeight + ")");

                // Now scale the image.
                var aspectRatio = 1.0;
                if (realHeight / height > realWidth / width) {
                    aspectRatio = realHeight / height;
                    width = realWidth / aspectRatio;
                }
                else {
                    aspectRatio = realWidth / width;
                    height = realHeight / aspectRatio;
                    //alert("aspectRatio = " + aspectRatio);
                    //alert("height = " + height);
                }

                var imgWidth = parseInt(width) + "px";
                var imgHeight = parseInt(height) + "px";

                //alert(imgWidth + ", " + imgHeight);

                //   $(this).css("width", imgWidth).css("heigth", imgHeight).css('display', 'block');
                $(this).css("width", imgWidth).css("heigth", imgHeight).css('display', 'block').css('text-align', 'center').css('margin-left', 'auto').css('margin-right', 'auto');
            }).each(function() {
                if (this.complete) {
                        $(this).load();
                }
            });
        }
    </script>
</head>
<body>

    <div style="width:85px; height:85px;">
        <img class="list-category-image" src="http://ecx.images-amazon.com/images/I/411j0fCdVKL._SL160_.jpg" alt="" />
    </div>

</body>
</html>

Answer 1

使用此关键字总是非常棘手，有时令人困惑，它可能是javascript的不同实现中的不同值。尝试将您的图像定义为变量，以查看它是否能解决您的问题：

       var imgList = $("img.list-category-image");
       imgList.one('load', function() {

            var width = 85.0, height = 85.0;
            var realWidth, realHeight;
            realWidth = imgList.width();   // Note: $(this).width() will not
            realHeight = imgList.height();

您可以使用以下代码检查其类型：

alert(typeof(this));

jquery image width（）在IE9中没有返回正确的值

1 个答案: