如何防止背景图像在 HTML 中调整大小？ [关闭]答案

【问题标题】：How to prevent the background image from getting resized in HTML? [closed]如何防止背景图像在 HTML 中调整大小？ [关闭]
【发布时间】：2014-09-06 17:36:01
【问题描述】：

我正在开发一个网站。

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

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

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

有什么建议吗？

【问题讨论】：

这个link会给你一个很好的主意来玩背景图片
请阅读Something on my web site doesn't work. Can I just paste a link to it?。当外部资源消失或固定时，依赖于外部资源来理解的问题变得毫无用处。改为创建SSCCE。
默认情况下，背景图片不会调整大小。停止做任何调整大小的事情。
您正在使用具有基于百分比宽度/高度的固定图像作为背景。因为高度设置为自动，它会随着高度变大而拉伸。
@Quentin 我只是新的堆栈溢出，所以不知道。从现在开始我将发布代码而不是链接。

标签： javascript jquery html image web

【解决方案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为

图片

标记max-width:100%

【讨论】：

这可行，但图像仍在浏览器水平调整大小时调整大小。垂直调整大小很好。

【解决方案2】：

方法一

只需从您的 <img 标记中删除 max-width: 120%;。

方法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 cz-shortcut-listen="true">替换为：

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

最后把图片BG.png改成合理的尺寸，比如1024px x 786px，太大了。

【讨论】：

【解决方案3】：

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

【讨论】：