Question

我正在开发一个网站。

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

我面临的问题是，当我调整浏览器大小时，图像也会缩小。我不想支持调整浏览器大小更改元素的大小。我想保持一切固定。这是代码段

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

有什么建议吗？

Answer 1

尝试这种方法

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

标记max-width:100%

Answer 2

方法1

只需从max-width: 120%;代码中删除<img。

方法2 （如果您想要正确执行此操作）

您有以下图片代码，请将其删除：

<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;">

然后将body标签<body cz-shortcut-listen="true">替换为：

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

最终将图片BG.png更改为合理的大小，如1024px x 786px，它太大了。

Answer 3

这是示例代码段之一。只需在您的代码中尝试： <img style="height:auto; width:auto; max-height:100%; max-Width:100%;" src="..">

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

3 个答案: