使用jquery获取可变大小的图像宽度和高度

Question

我有一个在加载和调整窗口大小时运行的函数。我想在将其调整为另一个变量后使用新值。我没有得到值的尺寸部分​​。

$(window).load(function(){
           var a=imageSize();
           getResizeImageWidthHeight(a);
            otherFunction();    
        });
        $(window).resize(function(){
            imageSize();

        });

图片大小调整

var imageSize =function() {
            var status='0';
            if( $(window).width()-300 > $(window).height() ) {
                $('#images').css({
                    'width': 'auto',
                    'height': ( $(window).height() )+'px'
                });
                status='1';
            }
            else {
                $('#images').css({
                    'width': ( $(window).width() )+'px',
                    'height': 'auto'
                });
                status='2';
            }
            return status;

        }

调整图片的宽度和高度

function getResizeImageWidthHeight(a) {
           x=a;
           if(x=='1') {
                    $("#images").load(function() {
                        imgWidth = this.width;
                        alert( "imgWidth: " + imgWidth );
                    });
                var imgHeight = $("#images").height();

            } else if(x=='2') {
                    $("#images").load(function() {
                        var imgHeight = this.height;
                    });
                var imgWidth = $("#images").width();
                alert( " imgHeight: " + imgHeight);
            } 
        }

和使用函数

function otherFunction() {
            var xWidth=imgWidth*2;
            var xHeight=imgHeight*3;
            .
            .
            etc. 
        }

Answer 1

如果您尝试使用容器缩放图像，有一种比在调整窗口大小时重新计算宽度/高度更简单的方法，这是fluid layout 理念的一部分。

基本上，您将图像设置为max-width: 100%;，它们将随着容器的大小而缩放。

不确定这是否是您的意图，但它不是 js。查看链接了解更多详情。

在调整大小后获取图像的大小：

您可以将大小保存在全局变量中，只需删除var:（不推荐）

imgHeight = $("#images").height();
imgWidth = $("#images").width();

或者您可以简单地使用 jquery 再次查询元素的高度：

var xWidth = $("#images").width() * 2;
var xHeight = $("#images").height() * 3;