Question

我正在使用代码在窗口调整大小时调整div中的一些图像。我想如果您阅读了您将理解的代码：

$('img').each( function() {
    var image = $(this);
    var imagewidth = $(this).width();
    $.event.add(window, 'load', resizeFrame);
    $.event.add(window, 'resize', resizeFrame);

    function resizeFrame() {

        var windowWidth = $(window).width();
        var ratio = (980/windowWidth)*100;

        if ( windowWidth <= 980 ) {
            image.width( ratio*imagewidth + '%');
        }
    }
});

代码不起作用，日志显示一些对象..而且没有值。

代码以某种方式工作。问题是它根据窗口的宽度调整图像大小，而不是原始大小的百分比。

Answer 1

此代码有多个问题。你要为resize事件附加N resize处理程序！并且您没有正确使用每个功能

这是清理代码：

$(window).resize(function(evt) {
        var windowWidth = $(window).width();
        var ratio = (windowWidth/980) * 100;
        $('img').each( function(i, obj) {
            var imagewidth = $(obj).width();
            if ( windowWidth <= 980 ) {
                $(obj).attr('width', ratio + '%');
            } else {
                $(obj).attr('width', '100%');
            }
        });
    });

HTML：

<div style="width: 200px;">
                <img src="image.png">
            </div>

要使此功能起作用，您需要确定图像周围div中图像的最大宽度。否则你必须保存图像的原始宽度以重新缩放它

根据百分比值调整图像大小

1 个答案: