0

当窗口调整大小时，我正在编写代码来调整 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 + '%');
        }
    }
});

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

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

4

1 回答 1

3

此代码有多个问题。首先为调整大小事件附加 N 个调整大小处理程序！而且您没有正确使用每个功能

这是清理代码：

$(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 中图像的最大宽度。否则你必须保存图像的原始宽度才能重新缩放它

于 2013-01-22T19:58:56.060 回答