Question

结帐Pinterest's splash page - **（确保您已退出帐户，或者您不会看到启动页面。）底部的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);

也无需更新宽度，因为<img>在CSS中仅调整一个维度时会按比例自动调整大小。但Pinterest上的完整代码还会更新图像上方内容的填充，以使其垂直居中。

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

右键单击图像＆gt;检查元素
调整窗口大小，注意在标签上设置了px中的显式高度，并持续更新。必须由JS完成。但是谁设定了它？
右键单击标记＆gt;打破......＆gt;属性修改
再次调整窗口大小并点击断点
调用堆栈顶部隐藏在缩小的jQuery代码中 - 可能只是用于设置CSS属性的通用代码。什么是堆栈中最高的非jQuery代码片段？
有代码！

Pinterest在twitter bootstrap中的启动页面

1 个答案: