无法跨越背景图像来完整显示
我有一张图像，无论屏幕尺寸如何，我都想完整显示。我在 Photoshop 中提取图像以渲染其大小（它最初为 4164 x 2667，因为它是矢量）并对其进行一些更改。
我将图像缩小到大约 1200 x 769 并将其保存为 PNG 格式。然而，整个图像没有在我的显示器上正确显示 - 它似乎将其拉伸到屏幕之外并切断了背景的很大一部分。
这是原始图像：
这是我在 jsbin 上使用的代码的链接，用于尝试出来：
http://jsbin.com/uyirah/2/edit
你可以看到如果你渲染图像的代码没有完全显示。关于可能导致这种情况的任何想法？我的 CSS 不好吗？
另外，最终图像使用什么尺寸来减少延迟时间比较合适？
I have an image that I would like to show in full regardless of screen size. I pulled up the image in Photoshop to render its size (it was originally 4164 x 2667 since it was a vector) and make some changes to it.
I downsized the image to about 1200 x 769 and saved it as a PNG. However, the entire image is not displaying properly on my monitor - it seems to be stretching it beyond the screen and cutting off a good portion of the background.
Here is the original image:
and here is a link to the code I used on jsbin to work with trying it out:
http://jsbin.com/uyirah/2/edit
You can see that if you render the code the image doesn't fully display. Any ideas on what might causing this? Is my CSS bad?
Also, what would be a good size to use for the final image as to reduce lag time?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您在 css 中为背景大小指定“cover”。这表明您希望图像缩放以使其完全覆盖背景，即使这会在一维上截断一些图像。
如果您希望图像在背景中尽可能大地显示，请尝试“包含”而不是“覆盖”...
You are specifying "cover" for background-size in your css. This indicates that you want the image to scale so that it completely covers the background, even if this cuts off some of the image in one dimension.
If you want the image to show completely as large as possible in the background, try "contain" instead of "cover"...