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

Question

我希望能够在我们的主页上设置一个背景，它可以随着窗口大小进行扩展和收缩，同时保持原始图像的纵横比......我猜这需要一些聪明的 Javascript 或类似的。

效果已在此处实现，因此窗口宽度超过 1500 像素左右时，背景将动态扩展。

http://www.pixelcrayons.com/

Answer 1

首先是个坏消息:CSS(目前)不允许拉伸(stretch)或缩放背景图像，因此它并不像应该的那样容易。

但是，有很多方法可以解决这个问题。最好的解决方案(恕我直言)是有一个正常的 <img>标签大小为 100%，定位 absolute (甚至 static 取决于你想要的效果)并使用 z-index 在其他所有东西后面分层.

此选项的最大优点是不涉及 Javascript。

但如果您想了解其他解决方案(涉及 Javascript)，请尝试此链接:http://css-tricks.com/how-to-resizeable-background-image/(但注意最后他的首选方案和我的是一样的)

希望对您有所帮助。