Question

我做了一个简单的功能，根据窗口的大小调整图像的大小。我无法确定何时确切，但有时img没有填满屏幕的宽度，但继续坚持高度。知道为什么会这样吗？

如果我控制台日志（iRatio＆lt; = wRatio）似乎适合任何东西，但显示的结果不正确。

img在css中设置为postion: absolute; with: 100%; top:0; left:0;。 $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"

这是一种做出否定的愚蠢方法，有时结果是 - 对象px。我通过执行此操作来解决问题，只有当iHeight小于wHeight时，iWidth小于wWidth并通过乘以-1来计算否定。

Answer 2

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

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

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

全屏＆amp;居中的背景图像脚本

2 个答案: