Fatal编程技术网
  • javascript/
  • Javascript 如何防止在HTML中调整背景图像的大小？

Javascript 如何防止在HTML中调整背景图像的大小？

javascript jquery html image web

Javascript 如何防止在HTML中调整背景图像的大小？,javascript,jquery,html,image,web,Javascript,Jquery,Html,Image,Web,我正在开发一个网站 我添加了一个超大的背景图像（大于浏览器的高度和宽度以获得视差效果） 我面临的问题是，当我调整浏览器大小时，图像也会缩小。 我不想支持在浏览器大小更改时调整元素的大小。 我想把一切都修好。下面是代码片段 $('#background').css({ "max-width" : "120%", "height": "auto", "width": "auto\9", "background-repeat" : "no-repeat", "

我正在开发一个网站

我添加了一个超大的背景图像（大于浏览器的高度和宽度以获得视差效果）

我面临的问题是，当我调整浏览器大小时，图像也会缩小。 我不想支持在浏览器大小更改时调整元素的大小。 我想把一切都修好。下面是代码片段

 $('#background').css({
    "max-width" : "120%",
    "height": "auto",
    "width": "auto\9",
    "background-repeat" : "no-repeat",
    "left":"0px",
"top":"0px",
    "position":"absolute",
    "z-index": "0"
    });
有什么建议吗？

试试这个方法

body{
  background: url(Resources/BG.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
或者将内联css更改为

img

标签
最大宽度：100%
方法1

只需删除
最大宽度：120%从您的



然后将车身标签
替换为：


<img id="background" src="Resources/BG.png" style="max-width: 120%; height: auto; left: 0px; top: 0px; position: absolute; z-index: 0; background-repeat: no-repeat no-repeat;">







最后将图像
BG.png
更改为合理的大小，如1024px x 786px，它太大了。
这是示例片段之一。只需在代码中尝试：

这将为您提供一个很好的背景图像播放方法，请阅读。当外部资源消失或固定时，依赖外部资源理解的问题将变得无用。改为创建一个。默认情况下，背景图像不调整大小。停止任何调整大小的操作。您正在使用基于百分比的宽度/高度的固定图像作为背景。因为高度设置为“自动”，它会随着高度变大而拉伸。@Quentin我只是新的堆栈溢出，所以没有意识到它。从现在起，我将发布代码，而不是链接。这是可行的，但图像仍会随着浏览器的水平调整而调整大小。垂直调整大小是好的。

<body cz-shortcut-listen="true" style="background:url(Resources/BG.png);">