Question

我想在我的网站正文中部署一个背景图像，该图像按窗口分辨率缩小，但不会超出其原始大小（1920x1080）。这样，具有较小分辨率的用户仍然可以看到整个图像，但是那些超出范围的用户没有丑陋的升级背景。

它看起来不像背景图像支持像max-width这样的属性，我通常会将其用于这样的目的。

解决方案可以是什么？这有可能在没有额外脚本的CSS中吗？

Answer 1

我会使用div作为最大宽度的包装，并将背景设置为该div。

<强> HTML

<body>
 <div class="container">Content</div>
</body>

CSS

.container {
  width: 100%;
  max-width: 1920px; /* YOUR BG MAX SIZE */
  background:url("bg.png") no-repeat;
  background-size: 100%;
}

Answer 2

只是一个非常小/快速的建议：

根据它的外观和所有流量，background-size:contain;可能是一个选项。

或者，在您的身体上，将最大宽度设置为1920，将边距设置为自动，这也可能适合您。

Answer 3

你可以这样试试。任何大小的图像分辨率都可以像响应一样工作：

img#mybg {
    position: fixed; //image will always be top: 0 left: 0 by default.
    display: block; //make it a block for width to work.
    width: 100%; //set default width
    height: 100%; //set default height
    max-width: 1920px; //set max width
    max-height: 1080px; //set max height
    z-index: -999999; //set z-index so it won't overlap any other element.
    background-size:100% 100%;
}

Answer 4

您可以尝试使用特定的<img>

创建一个html id代码

e.g。

<强> HTML

<img id="mybg" src="path/to/file" alt="never forget the blind folks!" />

<强> CSS

img#mybg {
    position: fixed; //image will always be top: 0 left: 0 by default.
    display: block; //make it a block for width to work.
    width: 100%; //set default width
    height: 100%; //set default height
    max-width: 1920px; //set max width
    max-height: 1080px; //set max height
    z-index: -999999; //set z-index so it won't overlap any other element.
}

对于动态居中，您必须将Javascript与window.onresize事件结合使用。

如果您需要更多信息，我会相应地编辑我的帖子。

使用jquery backstretch plugin的一个很好的替代方案，非常容易使用（但会扩展你的背景）。它允许您简单地添加全屏背景图像，该图像将按分辨率进行缩放（这不是您想要的，但我能想到的最佳替代方案）。

CSS：如果大于窗口，则缩小背景图像，否则保持100％

4 个答案: