Twitter bootstrap twitter引导中的Pinterest启动页面

签出-**（确保您的帐户已注销，否则您将看不到启动页）。底部的Macbook图像响应迅速，并根据浏览器窗口的大小进行缩小和扩展

愚蠢的问题。。。他们是怎么做到的？如何使用Twitter引导实现这一点？

如果您查看页面上的

块，您可以看到它是如何实现的。它基本上只是一个调整大小的侦听器。以下是一个简化版本：

var htAboveImage = $content.height(),
    naturalImageHt = 450,
    padding = 150,
    minImageHt = 100;

var changeFunc = function() {
    var windowHt = $window.height();
    var imageHt = Math.min(
                      Math.max(windowHt - htAboveImage - padding, minImageHt)
                      naturalImageHt,
                  );
    $image.height(imageHt);
};
changeFunc();
$(window).on("resize", changeFunc);

也不需要更新宽度，因为在CSS中仅调整一个维度的大小时，

s会自动按比例调整大小。但Pinterest上的完整代码也会更新图像上方内容的填充，以保持图像垂直居中

顺便说一句：当遇到这样的问题时，Chrome的开发工具是你的朋友！仔细使用这些工具，只需一分钟就能看到发生了什么：

右键单击图像>检查元素

调整窗口大小，注意在标记上设置了一个明确的px高度，并不断更新。必须由JS完成。但是是谁设定的呢

右键单击标记>断开…>属性修改

再次调整窗口大小并点击断点

调用堆栈的顶部隐藏在缩小的jQuery代码中——可能只是用于设置CSS属性的通用代码。堆栈上最高的非jQuery代码是什么

这是密码

---

你在问这个吗@Pigueiras没有。我说的是主登录页的底部有一个Macbook pro的图像。您必须注销您的Pinterest帐户或链接帐户（facebook）才能看到它。@espooz这是由js jquery完成的，使用chrome，您可以在更改高度时看到图像上的样式元素更改，我猜jquery会监听屏幕更改，相应地更新大小