0

结帐Pinterest 的启动页面- **（确保您已注销您的帐户，否则您不会看到启动页面。）底部的 Macbook 图像，它是响应式的，并且根据浏览器窗口的大小缩小和扩展。

愚蠢的问题......他们是怎么做到的？以及如何使用 Twitter Bootstrap 来做到这一点？

4

1 回答 1

0

如果您查看<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 中只调整一个维度时，s 会自动按比例调整大小。但是 Pinterest 上的完整代码还会更新图像上方内容的填充，以使其保持垂直居中。

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

  1. 右键单击图像 > 检查元素
  2. 调整窗口大小并注意在标签上设置了明确的 px 高度，并不断更新。必须由JS完成。但是谁在设置它？
  3. 右键单击标签 > 中断... > 属性修改
  4. 再次调整窗口大小并点击断点
  5. 调用堆栈的顶部隐藏在缩小的 jQuery 代码中——可能只是用于设置 CSS 属性的通用代码。堆栈上最高的非 jQuery 代码是什么？
  6. 有代码！
于 2013-04-24T18:51:23.793 回答