在保持原始宽高比的同时扩展背景

Question

我希望能够在我们的主页上设置一个背景，它可以扩展和缩小窗口大小，同时保持原始图像的宽高比....我猜这需要一些聪明的Javascript或类似。< / p>

此处已实现效果，然后窗口宽度超过1500像素，背景将动态扩展。

http://www.pixelcrayons.com/

Answer 1

首先是坏消息：CSS（目前）不允许对背景图像进行拉伸或缩放，因此它并不像应该的那样容易。

然而，围绕它有很多方法。最好的解决方案（恕我直言）是将正常<img>标记大小设置为100％，定位absolute（甚至static，具体取决于您想要的效果），并使用{在其他所有内容后面分层{1}}。

关于此选项的最好的事情是没有涉及Javascript。

但如果您想了解其他解决方案（确实涉及Javascript），请尝试以下链接：http://css-tricks.com/how-to-resizeable-background-image/ （但请注意，他最喜欢的解决方案与我的相同）

希望有所帮助。

Answer 2

有一个非常好的jQuery插件可用：SuperSized

它不仅可以进行背景调整，还有很多其他选项。希望它有所帮助！