Question

而不是在丛林中殴打，我会马上出来问：

http://www.platetheslate.com/

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

有人可以向我解释一下吗？感谢。

Answer 1

如果您将其作为背景图像放置，您可以使用非常方便的CSS3功能

background-size: cover

有关此替代方法的教程，请参阅Fullsize Background Image with CSS3 background-size。

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代码。

全屏标题图片

4 个答案: