无法跨越背景图像以完整显示答案

【问题标题】：Having trouble spanning a background image to show in full无法跨越背景图像以完整显示
【发布时间】：2012-02-01 21:18:14
【问题描述】：

我有一张想要完整显示的图片，无论屏幕大小如何。我在 Photoshop 中提取了图像以渲染它的大小（它最初是 4164 x 2667，因为它是一个矢量）并对其进行了一些更改。

我将图像缩小到大约 1200 x 769 并将其保存为 PNG。但是，整个图像无法在我的显示器上正确显示 - 它似乎将其拉伸到屏幕之外并切断了大部分背景。

这是原图：

这是我在 jsbin 上使用的代码的链接，用于试用：

您可以看到，如果您渲染代码，图像不会完全显示。关于可能导致这种情况的任何想法？我的 CSS 不好吗？

另外，为了减少延迟时间，最终图像使用什么尺寸比较合适？

【问题讨论】：

【解决方案1】：

您正在为 CSS 中的背景大小指定“封面”。这表示您希望图像缩放以使其完全覆盖背景，即使这会在一维中截断部分图像。

如果您希望图像在背景中尽可能大地显示，请尝试“包含”而不是“覆盖”...

【讨论】：

是的，我想过——但如果我使用包含，那么背景会随着我最小化屏幕而最小化——并且在大型显示器上它不会跨越整个屏幕（如果显示器尺寸超过图片大小）
:) 是的。你想要的行为是什么？如果屏幕和背景图像的纵横比不匹配，则背景图像可以通过三种方式填充屏幕：图像失真（使两个尺寸都完全填满屏幕）或图像被拉伸使屏幕完全填满但部分图像被截断，或图像被拉伸以不被截断但部分屏幕未被覆盖...
我应该拉伸以允许整个图像覆盖屏幕但显示整个图像......或者这不可能吗？ :p
你可以通过扭曲图像来做到这一点——在这种情况下，将背景大小设置为“100%”