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

我有一个图像，我想完全显示，无论屏幕大小。我在Photoshop中调出图像来渲染它的大小（因为它是一个向量，所以最初是4164 x 2667），并对其进行了一些更改

我将图像缩小到大约1200 x 769，并将其保存为PNG格式。然而，整个图像并没有在我的显示器上正确显示——它似乎将图像延伸到屏幕之外，并切断了背景的一部分

以下是原始图像：

这里有一个链接，指向我在jsbin上使用的代码，用于尝试：

可以看到，如果渲染代码，图像不会完全显示。你知道是什么导致了这一切吗？我的CSS不好吗

另外，为了减少延迟时间，最终图像的合适尺寸是什么

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

---

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

是的，我考虑过-但如果使用“包含”，则背景会随着屏幕的最小化而最小化-在大型显示器上，它不会覆盖整个屏幕（如果显示器大小超过图像大小）：）是的。你想要什么样的行为？如果屏幕和背景图像的纵横比不匹配，则背景图像可以通过三种方式填充屏幕：要么图像失真（这样两个维度都能准确地填满屏幕，或者图像被拉伸，屏幕被完全填满，但部分图像被切断，或者图像被拉伸，没有一个图像被切断，但部分屏幕没有被覆盖……我认为拉伸是为了允许整个图像覆盖屏幕，但显示整个图像。）。。。或者这是不可能的？：p你可以通过扭曲图像来实现——在这种情况下，将背景大小设置为“100%”