javascript - 全屏标题图片

Question

我不会拐弯抹角，而是直接出来问：

http://www.platetheslate.com/

他们做了什么来制作这个图像标题？我使用 chrome 的属性检查器并删除了所有的 javascript 代码和 css，图像仍在拉伸。元素内部的样式随窗口大小而变化。我想有一个事件监听器涉及，但我找不到它。

谁可以给我解释一下这个？谢谢。

Answer 1

如果你将它作为背景图片，你可以使用非常方便的 CSS3 功能

background-size: cover

有关此替代方法的教程，请参阅具有 CSS3 背景大小的全尺寸背景图像。

Answer 2

在 css 中复制实际上很容易：

​img { min-width: 100%; }​

这是一个例子：

http://jsfiddle.net/kZXgW/ - 尝试移动分隔线并看到它伸展。

然后，您可以向父级添加控件以保持高度，或者max-height如果您需要垂直约束它。我在您引用的网站上看不到任何真正的诡计，我也看不出有必要。如今，CSS 在这方面做得很好。

Answer 3

实际图片的宽度是硬编码的：

            <h1 class="title-text"> PLATE THE SLATE No. 6    <em>American      Cheese</em> </h1>
            <div id="h-image"> <img src="http://www.platetheslate.com/wp-content/uploads/2012/10/mfb-american-cheese.jpg" width="1100" height="650" alt="Image" /> </div>

变化的大小是：

function resizeText() {

            var topText = $(".title-text");

            var bottomText = $(".title-text em");

            bottomText.css({

                "font-size":getBottomSize(),

                "line-height":getBottomLineHeight()

            });

Answer 4

这是创建此功能的 .js 文件。 http://www.platetheslate.com/wp-content/themes/twentyeleven/js/jquery.main.js

它只是一些简单的 jQuery 代码。