Pinterest splash页面在twitter引导

Question

Checkout Pinterest的splash页面- **(确保您的帐户注销，否则您将看不到splash页面。)底部是Macbook的图像，它响应迅速，可以根据浏览器窗口的大小收缩和扩展。

愚蠢的问题……他们是怎么做到的?如何使用Twitter Bootstrap实现这一点?

Answer 1

如果您查看页面上的<script>块，您可以看到它是如何完成的。它基本上就是一个调整大小的监听器。下面是一个简化的版本:

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中只有一个尺寸时，<img>会自动按比例调整大小。但是Pinterest上的完整代码还更新了图像上方内容的填充，以保持其垂直居中。

顺便说一句:Chrome的开发人员工具是你的朋友当它涉及到这样的问题!仔细使用这些工具，只需要一分钟就可以看到发生了什么:

1. 右键单击图像>检查元素
2. 调整窗口大小，注意在标签上设置了一个显式的px高度，并不断更新。必须由JS完成。但是是谁设定的呢?
3. 右击标签> Break on…>属性修改
4. 再次调整窗口大小并击中断点
5. 调用栈的顶部隐藏在最小化的jQuery代码中& & &;可能只是用于设置CSS属性的通用代码。堆栈中最高的非jquery代码段是什么?
这就是代码!