Javascript 覆盖在“上的响应式div”；背景尺寸：包含"；-解决警报触发的问题 问题:

我使用的是一个

背景大小：contain

图像，上面覆盖有div，我希望它们相对于图像的比例和纵横比保持静止

它可以工作，但对于浏览器宽度小于背景图像宽度的小问题。发生这种情况时，您可以看到重叠div（.navbar和#home）开始滑出位置，但一旦浏览器自我纠正，就会立即恢复到正确的位置

我已经写了一份包含警报的报告。浏览器宽度小于背景图像宽度时，将触发警报。您需要水平调整浏览器窗口的大小以使其触发。您可以注释掉警报以观察DIV移位

这是什么原因造成的，我如何预防

代码：

var-width=$（'.bg'）.width（）；
变量高度=$（'.bg'）.height（）；
var imgWidth=宽度>高度？350/325*高度：宽度；
var imgHeight=高度>宽度？325/350*宽度：高度；
var imgTop=imghight*.75+（（高度-imghight）/2）；
$（'.navbar'）.css({
“宽度”：imgWidth，
“高度”：imghight*.15，
“顶部”：imgTop+“px”
});
$（窗口）.on（“调整大小”，函数（）{
宽度=$（'.bg'）.width（）；
高度=$（'.bg'）.height（）；
imgWidth=宽度>高度？350/325*高度：宽度；
imgHeight=高度>宽度？325/350*宽度：高度；
imgTop=imghight*.75+（（高度-imghight）/2）；
if（宽度

它跳跃是因为：

您有一个矩形图像--350px 325px。这意味着宽度===350px和高度===325px

您正在检查这两行中是否有

width>height

和

height>width

：

imgWidth = width > height ? 350/325 * height : width;
imgHeight = height > width ? 325/350 * width : height;

i、 e.您正在检查宽度（从350px开始）是否大于高度（325），高度（325）是否大于宽度（350）

以第二个示例为例：在图像开始收缩点之外水平收缩窗口25像素（350-325）之前，高度不会大于宽度。因此，对于前25px，不会重新计算高度，因为

height>width

仍然为false

最简单的补救方法就是对照偏移量进行检查——检查

width-25>height

和

height+25>width

：

imgWidth = width - 25 > height ? 350/325 * height : width;
imgHeight = height + 25 > width ? 325/350 * width : height;

---

此外，对于我认为更干净的代码，尽管是一个更复杂的修复，请查看此小提琴

不太清楚问题是什么以及您想要解决什么问题…很难描述；你必须亲自去看。使浏览器变小（水平），直到触发警报。然后注释掉警报，在同一个位置，观察红色和绿色框发生了什么。它们会短暂向下移动，如果你继续放大，它们会迅速向上移动。我希望它们不要向下移动。我希望它们在浏览器的所有大小调整中都能保持完美的位置。我认为偏移量是正确的，但它们并没有按预期工作。在第一把小提琴中，如果将相同的逻辑应用于更大的图像，DIV偏移会更明显。在第二把小提琴中，垂直调整大小时，div会剧烈移动。像这样的东西怎么样？--它似乎对所有大小调整都能正常工作，除了有一个非常短暂的光点，它会使像素剧烈移动。也许是四舍五入的计算问题？没关系。就这样做吧：

if（为什么要谢谢你！很抱歉我没有做大量的错误检查。很高兴我能帮上忙。
imgWidth = width - 25 > height ? 350/325 * height : width;
imgHeight = height + 25 > width ? 325/350 * width : height;