Question

我需要将图像放到视口/窗口大小。

我使用此代码执行此操作：

$(".fittedImg").each(function () {

        // I want to limit the size, and show a scrollbar on very small viewport
        height  = ($(window).height() < 725) ? 725 : $(window).height();
        width   = ($(window).width() < 1150) ? 1150 : $(window).width();

        var newWidth, newHeight;
        $(this)
            .removeAttr("height")
            .removeAttr("width"); // reset img size

        // calculate dimension and keep it 
        if (($(this).width() / width) > ($(this).height() / height)) {
            newHeight = height;
            newWidth = height / ($(this).height() / $(this).width());

        } else {
            newHeight = width / ($(this).width() / $(this).height());
            newWidth = width;
        };
        $(this).stop(true, false).animate({
            "height": newHeight + "px",
            "width": newWidth + "px"
        });
});

我将该代码包装在我调用resize的函数中，以及$（'。fitsImg'）。load（）和$（'。fitsImg'）。ready（）等事件上。

结果非常奇怪：在Chrome中它通常可以正常工作，但有时图像会在重复刷新时延伸。在IE上存在完全相同的问题。 Opera永远不会失败，safari会忽略计算（永远拉伸）。

我的计算和/或事件调用有什么问题？

谢谢。

Answer 1

确保图像在提取宽度/高度之前已完全加载
在计算

假设您想要将图像放入包含元素（在本例中为window）中，这里有一些您可能会觉得有用的更简单的计算。这个概念很简单，基于包含度量和图像测量，计算比率。然后将其与原始度量相乘：

$(".fittedImg").load(function(){

  var imgWidth = this.width,
      imgHeight = this.height,
      winWidth = $(window).height(),
      winHeight = $(window).width(),
      ratio = Math.min(winWidth/imgWidth, winHeight/imgHeight);

   // if you don’t want it to upscale, use Math.min or Math.max on the ratio

   $(this).stop(true, false).animate({
       height: imgHeight*ratio,
       width: imgWidth*ratio
   });
});

请注意，某些扩展程序（如AdBlock）可能会破坏图像中提取的宽度/高度。您可以对imgWidth / imgHeight进行控制和发送短信，以确保其可用。

另请注意，添加此事件后，您的图片可能已加载，具体取决于您放置代码的方式。在这种情况下，您应该检查IMG元素上的complete属性：

$('fittedImg').each(function() {
    $(this).load(function() {
        // the calculations goes here
    });
    if (this.complete) { // check if image is already loaded
        $(this).trigger('load');
    }
});

使图像适合视口

1 个答案: