全屏和居中背景图片脚本

Question

我做了一个简单的函数，可以根据窗口的大小调整图像的大小。 我无法确定确切的时间，但有时img不会填充屏幕的宽度，而是会继续保持高度。 知道为什么会这样吗？

如果我在控制台日志（iRatio <= wRatio）中显示任何内容，但显示的结果不正确。

img设置为postion: absolute; with: 100%; top:0; left:0; postion: absolute; with: 100%; top:0; left:0; 在CSS中。 $win包含$(window)和$img背景图片

function autoImageSize($img, $win){
        var wHeight = $win.height(),
            wWidth = $win.width(),
            iHeight = $img.height(),
            iWidth = $img.width(),
            iRatio = iWidth / iHeight, 
            wRatio = wWidth / wHeight;

          if(iRatio <= wRatio){
            $img.css({
               width: "100%", 
               height: "auto",
               top: "-" + ((iHeight - wHeight)/2) + "px",
               left: 0
            });
          }else{
            $img.css({
               width: "auto", 
               height: "100%",
               top: 0,
               left: "-" + ((iWidth - wWidth)/2) + "px"
             });
          }

          return [$img.width(), $img.height()];
};

Answer 1

问题是：

left: "-" + ((iWidth - wWidth)/2) + "px"

和

top: "-" + ((iHeight - wHeight)/2) + "px"

这是一种否定的愚蠢方法，有时结果是--somenumber px。 我通过仅在iHeight小于wHeight或iWidth小于wWidth的情况下执行此操作来解决此问题，并通过乘以-1计算负数。

Answer 2

将图像的宽度设置为100％时，它将填满其父图像的宽度。 与高度为100％的情况一样，但父级也需要一个固定的像素高度（据我所知）。

而不是将高度设置为100％，您应该使用图像的比例来计算与窗口高度匹配的宽度：

var toWidth = $win.height() * iRatio;
$img.width(toWidth);