Question

在我的实际Javascript中，我预加载一些图像并将其显示在index.html的主体上。我需要一种方法来调整它们的大小，以便窗口的宽度和高度。这是我的实际代码：

function($) {
    $.preLoadImages = function() {
        var args_len = arguments.length;
        for (var i = args_len; i--; ) {
            var cacheImage = document.createElement('img');
            cacheImage.src = arguments[i];
            arrayimg.push(cacheImage);
        }
        arrayimg.reverse();
    }
})(jQuery)

function resizing(img) {

    var $image = img;
    var image_width = $image.width;
    var image_height = $image.height;
    var body_width = $("#corps").width();
    var body_height = $("#corps").height();
    $image.width = body_width;
    $image.height = body_height;

}

$.preLoadImages("./images/01.jpg", "./images/02.jpg", "./images/03.jpg", "./images/p1.jpg", "./images/p2.jpg", "./images/p3.jpg");
for ( j = 0; j < arrayimg.length; j++) {
    resizing(arrayimg[j]);
}

这段代码实际上效果很好。主要问题是调整大小不是保持实际图片的方面。我需要一些尊重初始图片宽高比的代码。

Answer 1

您可以像这样计算比率：

var ratio = Math.min(body_width/image_width, body_height/image_height);

然后加倍：

$image.width = ratio*body_width;
$image.height = ratio*body_height;

我认为你想要“适应”体内的图像。如果要剪辑，请将Math.min替换为Math.max（并添加溢出：隐藏等...）

预加载和调整图像jQuery / Javascript

1 个答案: